[JavaScript知识库]javascript函数的继承

/**
 * 原型链继承
 * 缺点:
 * 父类的所有引用属性（info）会被所有子类共享，更改一个子类的引用属性，其他子类也会受影响
 * 是直接继承prototype
 * 即：Child.prototype = Person.prototype 缺点很明显 原型改变父原型也改变
 */
function Person() {
    this.name = '123',
        this.obj = {
            name: "张三"
        }
}
Person.prototype.getName = function () {
    return this.name
}
function Child() {
}
Child.prototype = new Person();
Child.prototype.constructor = Child
console.log(new Child().getName())
let child = new Child()
child.obj.name = '456'

console.log(new Child().obj.name)//456
console.log(child)

/**
 * 构造函数继承
 * 缺点：继承不到父类的原型上的属性和方法
 * 原理：new 关键字过程：new 先生成一个新对象，并把this指向这个实列对象，
 * 然后执行这个这个构造函数=>
 * 当Person.apply(this) 上面的新对象执行了一遍父类构造
 * 优点：
 * 可以向父构造传参
 */
function Child2() {
    Person.apply(this, arguments)
    //return {}
}
console.log(new Child2().name)
try {
    console.log(new Child2().getName())//报错，因为继承不到父类的原型上的属性和方法
} catch (error) {
    //console.log(error)
}


/**
 * 上面两个的结合
 * 组合继承
 * 父类的方法可以复用
 * 可以在Child构造函数中向Parent构造函数中传参
 * 父类构造函数中的引用属性不会被共享
 * 为什么:js的访问机制：先在实列对象上找，当实列对象上没有的时候才去原型上找
 * Person.apply(this,arguments) 这个就意味着子类拥有一份父类引用属性
 * 修改只是修改了实列对象
 * 缺点:执行了两次父类构造
 */
function Child3() {
    Person.apply(this, arguments)
}
Person.prototype.newObj = {
    newVal: "2444"
}
Child3.prototype = new Person();
Child3.prototype.constructor = Child3
console.log(new Child3().name)//123
new Child3().obj.name = "李四"
console.log(new Child3().getName())//123

//演示为什么
console.log(new Child3().newObj.newVal)//2444
new Child3().newObj.newVal = '2333'
console.log(new Child3().newObj.newVal)//2333

//对象的继承

/**
 * 原型式继承YUI库
 * 上面的构造继承 多new 一个父类对像，内存增加 把他放在一个新空对象上即可
 */

function Child4() {

}
var F = function () { };
F.prototype = Person.prototype;
Child4.prototype = new F();
Child4.prototype.constructor = Child4;

/**
 * 拷贝继承
 * @param {*} Child 
 * @param {*} Parent 
 */
function copyExtend(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
        c[i] = p[i];
    }
}

阅读世界，共赴山海

423全民读书节，邀你共读