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];
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值