JavaScript学习第十天笔记(继承)

发布时间:2019-08-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript学习第十天笔记(继承)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

继承

原型链@H_126_4@

如果构造函数或对象A的原型指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原型指向Object的原型。由此形成了一条链状结构,被称之为原型链。按照上述的描述,在B中定义的属性或方法,可以在A中使用并不需要定义。这就是继承,它允许每个对象来访问其原型链上的任何属性或方法。在JS语言中,原型链是继承的默认产生方式。

//原型链
function A(){
    this.a = 'a';
}
//通过构造函数创建对象
VAR a = new A();


function B(){
    this.b = 'b';
}
//将B的原型指向A
B.PRototyPE = a ;
var b =new B();
console .LOG(b.a);//a
console .log(b.b);//b

function C(){
    this.c = 'c'
}
//将C的原型指向B
C.prototype = b;
var c= new C();
/*console .log(对象.属性)*/
console .log(c.c);//c
console .log(c.b);//b
console .log(c.a);//a

只继承与原型

出于对效率的考虑,尽可能地将属性和方法加到原型上,可以采用以下方式:
1.不要为继承关系单独创建新对象。
2.尽量减少运行时的方法搜索。

//原型链
function A(){

}
A.prototype.a='a';//将自有属性改写为原型属性

function B(){

}
B.prototype=A.prototype; //将B的原型属性指向A的原型属性
B.prototype.b = 'b';


function C(){
    this .c='c';
}
C.prototype = B.prototype;

var c = new C;
console .log(c.c);
console .log(c.b);
console .log(c.a);

原型链的问题

原型链虽然强大,用它可以实现JS中的继承,但同时也存在一些问题。
1.原型链实际上是在多个构造函数或对象之间共享属性和方法。
2.创建子类的对象时,不能向父级的构造函数传递任何参数。
所以,在实际开发中,很少会单独使用原型链。

原型式继承

所谓原型式继承,就是定义一个函数,该函数中创建一个历史性的构造函数,将作为参数传入的对象作为这个构造函数的原型,最后返回这个构造函数的实现对象。

/*
    定义一个函数 - 用于实现对象之间的继承
    * 参数
      * obj - 表示继承关系中的父级对象
      * prop - 对象格式,表示继承关系中的子级对象的属性和方法
  */
function fn(obj, porp){
    // 定义一个临时的构造函数
    function Fun(){
        // 遍历对象的属性和方法
        for (var attrName in porp) {
            // var attrValue = porp[attrName];
            this[attrName] = porp[attrName];
        }
    }
    // 将函数的参数作为构造函数的原型
    Fun.prototype = obj;
    // 将构造函数创建的对象进行返回
    return new Fun();
}
var obj = {
    name : 'HK'
}
// 调用函数
var result = fn(obj, {
    age : 26,
    sayMe : function(){
        console.log('this is function');
    }
});
console.log(result.age);
result.sayMe();

Object.create()方法实现继承

var obj = {
    name : 'HK'
}
var newObj = Object.create(obj, {
    age : {
        value : 26
    },
    sayMe : {
        value : function(){
            console.log('this is function');
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

借助构造函数

在子级中调用父级元素的属性

// 定义父级对象的构造函数
function Parent(){
    this.parent = 'parent';
}

// 定义子级对象的构造函数
function Child(){
    // 调用父级对象的构造函数 -> 使用apply()或call()方法
    Parent.call(this);

    this.child = 'child';
}
// 创建子级对象
var child = new Child();
console.log(child);

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript学习第十天笔记(继承)全部内容,希望文章能够帮你解决JavaScript学习第十天笔记(继承)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。