原型以及原型链的学习
原型以及原型链的学习
一 原型:
定义:原型是function对像的一个属性,他定义了构造函数制造出的对象的公共祖先;
1.通过该构造函数产生的对象,可以继承该原型的属性和方法。
原型也是对像。prototype;
Person.prototype.name = 'jams'; function Person(){ } var person = new Person();
2.当打印:console.log(person.name)时,会先从函数中找看下有没有这个属性值,如果没有就去原型prototype中找;
因此,这时候打印出来的值为:jams
- prototype 是函数对象默认的属性,可以增删改查;
- 利用原型特点和概念,可以提取共有属性;
3.对象如何查看原型——>隐式属性:proto
proto 中存放的就是构造函数的原型
相当于:在函数中隐藏了一段代码:
var this = { __proto__: Person.prototype }
举个例子:
var obj = { name: 'a'} var obj1 = obj; obj = {name : 'b'} console.log(obj1.name);// 输出的值为 a console.log(obj.name);// 输出的值为 b 对比: var obj = { name: 'a'} var obj1 = obj; obj.name ='b' console.log(obj1.name);// 输出的值为 b console.log(obj.name);// 输出的值为 b
原因: 当你修改obj.name 时,修改的是原型中的值,当你重新附值给obj时(obj={name:'b'}),相当于重新定义了obj这个变量;
换个理解方式为,obj.name 是一个指针,而obj 是一个变量;
4.对象如何查看对象的构造函数:constructor;
constructor 是默认自带的一个属性,他的值指向原函数;
二 原型链:
1.如何构成原型链: 一级一级往上找;
举个例子:
Grand.prototype.lastName = 'a'; function Grand(){ } var grand = new Grand(); Father.prototype = grand; function Father() { this.name = ' b '; } var father = new Father(); Son.prototype = father; function Son(){ this.hobbit = 'smoke'; } var son = new Son(); console.log( son.name ); // b console.log(son.lastName); // a
2.原型链上属性的增删改查:跟原型上的增删改查基本一致,其中删除:delete 只能通过原型prototype 才能删除原型的值;
Person.prototype = { name = 'a', sayName : function(){ console.log(this.name); } } function Person(){ this.name = 'b'; } var person = new Person();
sayName 里面的this指向是,谁调用的这个方法,this指向谁;
- 所以最终结果person.sayName() 的值为b
- 而Person.prototype.sayName() 的值为a
3.绝大多数对象的最终都会继承自Object.prototype
但不是所有的对象都可以继承,特例:Object.creat()原型;
例如:object.creat(null) ,该对象没有prototype原型;
4.原型链的重写:
例如常见的如下原型链就是经常被重写试用的,当然自己定义的原型同样也是可以被重写
Object.prototype.toString Number.prototype.toString Array.prototype.toString Boolean.prototype.toString String.prototype.toString
三 call、apply
call、apply的作用:可以借助别人的函数实现自己的功能
call 可以该表this指向
例如:
function Person(name,age){ //this == obj; this.name = name; this.age = age; } var person = new Person( 'a' ,100); var obj = {} Person.call(obj, 'b' ,300);
这句话的意思就是调用Person的方法,然后将相关值附值给obj,使得obj有相关参数属性值;
执行结果:obj
{name: "b", age: 300} //这样的好处,借用Person的方法来封装了obj;
例如:
function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } function otherInformation(tel,grade){ this.tel = tel; this.grade = grade; } function Student(name,age,sex,tel,grade) { Person.call(this,name,age,sex); //欢迎加入全栈开发交流圈一起学习交流:864305860 otherInformation.call(this,tel,grade) } //面向1-3年前端人员 var student = new Student('asd',123,'male',129,2018) ; //帮助突破技术瓶颈,提升思维能力 // 输出结果: Student {name: "asd", age: 123, sex: "male", tel: 129, grade: 2018}
call与apply的区别:后面传的参数形式(或者传参列表)不同;
apply 只能传两个参数,一个是this,另一个是数组,例如:
Person.apply(this,[name,age,sex]);
结语
感谢您的观看,如有不足之处,欢迎批评指正。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
用户评论