大家好,我是蓝胖子的小叮当,今天分享的是JavaScript的第四章原型和原型链,大家在阅读期间有任何的意见或建议都可以留言给我哈!
4.1原型详解
一张图带你搞懂原型
//由上图可得出以下结论
person.__proto__ === Person.prototype
Person === person.__proto__.constructor
每个函数都有一个prototype属性,被称为显式原型
每个实例对象都有一个_proto_属性,被称为隐式原型,并指向自身构造函数的显式原型prototype
每个prototype原型都有一个constructor属性,指向它关联的构造函数
4.2原型应用场景
// 扩展内置对象功能
// 例如:给所有数组添加一个自定义的方法来检查数组是否为空
Array.prototype.isEmpty=function(){
return this.length===0
}
let arr=[]
console.log(arr.isEmpty()) // true
// 创建具有共享方法的构造函数
// 定义一个构造函数并在原型上添加方法以节省内存
function Person(name){
this.name=name
}
Person.prototype.greet=function(){
console.log(`my name is ${this.name}`)
}
const alice=new Person('Alice')
alice.greet() //my name is Alice
4.3原型链详解
获取对象属性时,如果对象本身没有这个属性,那就会去他的原型_proto_上去找,如果还找不到就去找原型的_proto_上查找,一直找到最顶层(Object.prototype)为止,Object.prototype对象也有_proto_属性值为null,这样链式查找的过程称为原型链。
4.4原型链应用场景
// 通过原型对象为对象增加方法
let Obj=function(name){
this.name=name
}
let obj=new Obj('Celia')
obj._proto_.say=function(){
console.log(this.name)
}
// Celia
// 原型链继承
function Father(){
this.property = true;
}
Father.prototype.getFatherValue = function(){
return this.property;
}
function Son(){
this.sonProperty = false;
}
//继承 Father
Son.prototype = new Father();
//Son.prototype被重写,导致Son.prototype.constructor也一同被重写
Son.prototype.getSonVaule = function(){
return this.sonProperty
}
var instance = new Son()
console.log(instance.getFatherValue()) //true
好啦,关于原型和原型链的知识点就总结到这里,如果有什么疑问、意见或建议,都可畅所欲言,谢谢大家,我也将持续更新。
预告:在实际开发中会遇到想要改变函数内部this的指向吗?欢迎收看JavaScript基础的下一章:call、apply、bind