当前位置:网站首页>ES6中的原型对象
ES6中的原型对象
2022-07-07 07:20:00 【小白啥时候能进阶成功】
1、原型链
对象的原型(__proto__)->Star原型对象;
Star原型对象的原型(__proto__)->Object原型对象;
Object原型对象的原型(__proto__)->null;
2、对象成员的查找规则
按照“原型链”查找;
先看对象上是否有该成员;如果对象成员没有,则去Star原型对象上查找;Star原型对象没有,去Object原型(null)上查找......,没有则返回undefined;
如果对象上有,原型对象上也有,则返回对象上的成员(就近原则);
3、原型对象this指向
原型对象中this的指向:谁调用原型对象中的函数,this就指向谁(实例对象);
4、扩展内置对象方法
<script type="text/javascript">
//原型对象的应用,扩展内置对象方法
console.log(Array.prototype);
Array.prototype.sum = function(){
var sum = 0;
for(var i=0;i<this.length;i++)
{
sum += this[i];
}
return sum;
}
//var arr = [1,2,3];
var arr1 = new Array(1,2,3);
console.log(arr.sum());//根据原型链进行查找
console.log(Array.prototype);
</script>
运行结果:
数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.prototype.xx=function(){}方式。
5、call方法的作用
调用这个函数,并且修改函数运行时的this指向。
fun.call(thisArg,arg1,arg2,...)
- thisArg:当前调用函数的this对象;
- arg1,arg2:参数;
<script type="text/javascript">
var o ={
name:'fang'
}
function fn(x,y){
console.log("this is call demo");
console.log(this);//this本来是指向window(window.fn())
console.log(x+y);
}
fn.call();//1、可以调用fn函数;
fn.call(o,2,3);//2、改变this指向,指向o这个对象
</script>
运行结果:
6、利用构造函数继承父类的属性和方法
1、继承属性
通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。
<script type="text/javascript">
function Father(uname,age){
//this指向父类构造函数的对象实例
this.uname = uname;
this.age =age;
}
function Son(uname,age){
//this指向子类构造函数的对象实例
Father.call(this,uname,age);
}
var son1 = new Son('liming',25);
console.log(son1);
</script>
运行结果:
2、继承方法
<script type="text/javascript">
function Father(uname,age){
//this指向父类构造函数的对象实例
this.uname = uname;
this.age =age;
}
Father.prototype.money = function()
{
console.log("make money");
}
function Son(uname,age){
//this指向子类构造函数的对象实例
Father.call(this,uname,age);
}
Son.prototype = new Father();//将子类的原型执行父类的实例对象
Son.prototype.constructor = Son;
Son.prototype.exam = function(){
console.log("exam :100");
}
var son1 = new Son('liming',25);
console.log(son1);
console.log(Father.prototype);
</script>
运行结果:
7、遍历数组
1、forEach()
array.forEach(function(currentValue,index,arr))
- CurrentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
<script type="text/javascript">
var arr =[1,2,3];
var sum =0;
arr.forEach(function(value,index,array){
sum+=value;
});
console.log("sum:"+sum);
</script>
2、filter() 筛选数据
array.filter(function(currentValue,index,arr))
- filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组。
- 它直接返回一个新数组。
- currentValue:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
<script type="text/javascript">
var arr =[61,12,83];
var newArr = arr.filter(function(value,index,array){
return value >= 20;
});
console.log("newArr:"+newArr);
</script>
运行结果:
3、forEach和some区别
var arr =['red','green','blue'];
arr.some(function(value,index,array){
if(value == 'green'){
console.log("find ");
return true;//在some里遇到return就会终止遍历,迭代效率更高。
}
console.log("value:"+value);
});
8、字符串方法
trim()方法会从一个字符串的两端删除空白字符
str.trim()
- trim()方法并不影响原字符串本身,它返回的是一个新的字符串。
<script type="text/javascript">
var str = ' liming ';
console.log('str:'+str);
var newStr = str.trim();
console.log("newStr:"+newStr);
</script>
9、对象方法
Object.defineProperty()定义对象中新属性或修改原有属性。
Object.defineProperty(obj,prop,descriptor)
- obj:必需。目标对象。
- prop:必需。需定义或修改的属性定义
- descriptor:必需。描述
descriptor定义:以对象形式{}书写
- value:设置属性的值,默认为undefined
- writalbe:值是否可以重写。true|false(默认是false)
- enumerable:目标属性是否可以被枚举。true|false(默认是false)
- configurable:目标属性是否可以被删除或是否可以再次修改特性ture|false(默认false)
<script type="text/javascript">
var obj ={
id:1,
name:'huawei',
price:1000
};
Object.defineProperty(obj,'id',{
value:2,
writable:false,
});
Object.defineProperty(obj,'address',{
value:'shandong china',
enumrable:false,
configurable:false,//address不允许被删除
});
console.log(Object.keys(obj));//找不到address
delete obj.address;
console.log(obj);//address不允许被删除
delete obj.name;
console.log(obj);//name允许被删除
</script>
运行结果:
边栏推荐
- Switching value signal anti shake FB of PLC signal processing series
- Write it into the SR table in the way of flinksql. It is found that the data to be deleted has not been deleted. Refer to the document https://do
- 【学习笔记-李宏毅】GAN(生成对抗网络)全系列(一)
- Guys, how can mysql-cdc convert the upsert message to append only
- 2020 Zhejiang Provincial Games
- Addition, deletion, modification and query of ThinkPHP database
- Basic use of JMeter to proficiency (I) creation and testing of the first task thread from installation
- 官媒关注!国内数字藏品平台百强榜发布,行业加速合规健康发展
- ORM--数据库增删改查操作逻辑
- Codeforces - 1324d pair of topics
猜你喜欢
反卷积通俗详细解析与nn.ConvTranspose2d重要参数解释
web3.0系列之分布式存储IPFS
Wallys/IPQ6010 (IPQ6018 FAMILY) EMBEDDED BOARD WITH ON-BOARD WIFI DUAL BAND DUAL CONCURRENT
AI从感知走向智能认知
Pit using BigDecimal
How will fashion brands enter the meta universe?
Use 3 in data modeling σ Eliminate outliers for data cleaning
Qualifying 3
Win10安装VS2015
字节跳动 Kitex 在森马电商场景的落地实践
随机推荐
Parameter sniffing (1/2)
官媒关注!国内数字藏品平台百强榜发布,行业加速合规健康发展
The difference between viewpager2 and viewpager and the implementation of viewpager2 in the rotation chart
Guys, how can mysql-cdc convert the upsert message to append only
Analyze Android event distribution mechanism according to popular interview questions (II) -- event conflict analysis and handling
Can't connect to MySQL server on '(10060) solution summary
Integer inversion
Main (argc, *argv[]) details
[original] what is the core of programmer team management?
第十四次试验
Flinkcdc failed to collect Oracle in the snapshot stage. How do you adjust this?
ViewPager2和VIewPager的區別以及ViewPager2實現輪播圖
ORM模型--关联字段,抽象模型类
反卷积通俗详细解析与nn.ConvTranspose2d重要参数解释
Check the example of where the initialization is when C initializes the program
ORM--逻辑关系与&或;排序操作,更新记录操作,删除记录操作
Bean 作⽤域和⽣命周期
【学习笔记-李宏毅】GAN(生成对抗网络)全系列(一)
Pit encountered by vs2015 under win7 (successful)
Using keras in tensorflow to build convolutional neural network