super原理分析

super原理分析

对象中的继承，zw的show方法调用父级user的show方法可以通过this.proto .show(),但是this._proto_是User，也就是说是User调用了User的show方法，所以User的show方法中的指向的是User。

let User = {
    name:'user.name',
    show(){
        console.log(this.name)
       // console.log('User的show（）')
    }
}
let zw = {
    _proto_:User,//对象继承
    name:'zw.name',
    show(){
        //这个this指向的是user，方法中的this谁调用指向谁
        this._proto_.show()
        //console.log('za的show()')
    }
}
zw.show() //user.name

解决this的指向问题，可以通过call函数来绑定新的this

let User = {
    name:'user.name',
    show(){
        console.log(this.name)
       
    }
}
let zw = {
    _proto_:User,//对象继承
    name:'zw.name',
    show(){
        //这个this指向的是user，方法中的this谁调用指向谁
        this._proto_.show.call(this)
            }
}
zw.show() //zw.name

以上的继承方法等同于：
super就是调用父级里面的方法

class User{
    name = 'user'
    show(){
        console.log(this.name)
    }
}
class Zw extends User{
    constructor(name){
        super()
        this.name = name
    }
    show(){
        super.show()
    }
}
let z = new Zw('小一')
z.show() //'小一'

call绑定this的问题：

let pepole= {
    name:'pepole.name',
    show(){
        console.log('pepole.name')
    }
}
let User = {
	_proto_:pepole,
    name:'user.name',
    show(){
    //如果想调用User父级的show方法就是失败的，
    //因为此时this指向的是zw
    //所以形成死循环，自己调用自己
        this._proto_.show.call(this)
    }
}
let zw = {
    _proto_:User,//对象继承
    name:'zw.name',
    show(){
        //这个this指向的是user，方法中的this谁调用指向谁
        this._proto_.show.call(this)
            }
}
zw.show() //zw.name

通过super来实现

let pepole= {
    name:'pepole.name',
    show(){
        console.log('pepole.name')
    }
}
let User = {
	_proto_:pepole,
    name:'user.name',
    show(){
    //如果想调用User父级的show方法就是失败的，
    //因为此时this指向的是zw
    //所以形成死循环，自己调用自己
        super.show.()
    }
}
let zw = {
    _proto_:User,//对象继承
    name:'zw.name',
    show(){
        //这个this指向的是user，方法中的this谁调用指向谁
        super.show()
            }
}
zw.show() //zw.name

super只能在以上形式中调用，如果将show写成属性,如下则会报错：

let zw = {
    _proto_:User,//对象继承
    name:'zw.name',
    show:function(){
        //这个this指向的是user，方法中的this谁调用指向谁
        super.show()
            }
}