目录
一、问题引出
由于JS的构造函数存在内存浪费问题:
javascript
function Star(name,age){
this.name=name
this.age=age
this.sing=function () {
console.log("唱歌!")
}
}
let star01=new Star("Jack",18)
let star02=new Star("Mark",20)
console.log(star01.sing==star02.sing)
打印:不同实例对象的动态方法是不同的,会开出新的内存区域用于存储相同的方法。
对此问题,提出了原型处理方法。
二、prototype原型对象
我们可以将不变的方法直接定义在prototype属性中,以减少内存开销。
对上面的问题代码进行优化:
javascript
function Star(name,age){
this.name=name
this.age=age
}
Star.prototype.sing=function (){
console.log("唱歌!")
}
let star01=new Star("Jack",18)
let star02=new Star("Mark",20)
console.log(star01.sing==star02.sing)
打印:可以看到两个实例对象的该方法是同一个,证明都使用了同一个原型里的方法,没有新开内存拷贝。
三、小结
1、公共属性写到构造函数里;
2、公共函数写到prototype原型对象里;
3、构造函数里的this就是指向实例化的对象;
4、原型对象里的this还是指向实例化的对象。
四、constructor
prototype里的属性constructor属性就是帮原型确定它的构造函数是谁,如,构造函数Star的prototype里的constructor属性就是指向Star构造函数的。
作用:指向原型对象的构造函数。
javascript
function Star(){
}
console.log(Star.prototype)
Star.prototype={
sing:function (){
console.log("唱歌")
},
dance:function (){
console.log("跳舞")
}
}
console.log(Star.prototype)
打印:没构造前,有constructor属性,构造后没有了
可以看到,上面这种写法直接给prototype赋值了新值,没有了constructor对象标识,正确写法应该是:
javascript
function Star() {
}
console.log(Star.prototype)
Star.prototype = {
//重新指回这个原型的构造函数 Star
constructor: Star,
sing: function () {
console.log("唱歌")
},
dance: function () {
console.log("跳舞")
}
}
console.log(Star.prototype)
打印:
五、__proto__对象原型
每个实例化的对象都有一个__proto__,而这个__proto__就是指向构造函数的prototype对象的。这样一来,每个实例化对象都可以访问prototype里的数据了。
1、这是一个只读属性;
2、
javascript
function Star() {
}
const star01=new Star()
console.log(star01.__proto__ === Star.prototype)
打印:这里可以看到__proto__指向的是构造函数的原型对象
此外,__proto__实例化对象的原型中也有constructor,并且是指向prototype原型对象中的constructor的。
六、原型链
只要是对象就是__proto__,prototype对象中也有__proto__属性,我们按照prototype的__proto__可以一级一级的指向,到最顶层Object.prototype.__proto__指向为null。
使用场景:比如某个对象需要调用一个方法,而这个方法在当前对象里没有,就会向上一级查找是否有该方法,若仍然没有再往上寻找prototype里是否有该方法,依次类推,直至到顶层prototype里查找,指向为null时结束查找。
可以通过instanceof来判断对象是否在一个原型链上。