js 继承

时间：2016-07-10 11:06:05 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：

1.对象继承

（1）把父亲对象赋值给孩子对象的原型

//要继承的对象
var parent = {name:‘Lily‘,age:23};
//新对象
var child = object(parent);

function object(P){
    function F(){}
    F.prototype = P;
    return new F();
}
console.log(child.name);//Lily

(2) 使用ES5的Object.create(object,propertiesObject)方法代替上面的object函数

//要继承的对象
var parent = {name:‘Lily‘,age:23};
//新对象
var child = Object.create(parent);

console.log(child.name);//Lily

(3)把父亲对象的属性复制给子对象

a.浅拷贝

//浅拷贝函数
function extend(parent,child){
    var i;
    child = child || {};
    for(i in parent){
        if(parent.hasOwnProperty(i)){
            child[i] = parent[i];
        }
    }
    return child;
}
var parent = {name:‘Lily‘,info:{age:23}};
var child = extend(parent);
console.log(child.info.age);//23
child.info.age = 30;
console.log(child.info.age);//30
console.log(parent.info.age);//30

b.深拷贝

        //深拷贝函数
        function deepExtend(parent,child){
            var i,
                toStr = Object.prototype.toString,
                asStr = "[object Array]";
            child = child || {};
            for(i in parent){
                if(parent.hasOwnProperty(i)){
                    if(typeof parent[i] === ‘object‘){
                        child[i] = (toStr.call(parent[i]) === asStr) ? [] : {};
                        deepExtend(parent[i],child[i]);
                    }else{
                        child[i] = parent[i];
                    }
                }
            }
            return child;
        }
        var parent = {name:‘Lily‘,info:{age:23}};
        var child = deepExtend(parent);
        console.log(child)
        console.log(child.info.age);//23
        child.info.age = 30;
        console.log(child.info.age);//30
        console.log(parent.info.age);//23

(4)借助方法

　　　　 var parent = {
            name: ‘Lily‘,
            age: 23
        };
        var child = {
            getInfo: function(){
                console.log(‘name:‘+this.name+‘;age:‘+this.age);//name:Lily;age:23
            }
        }
        child.getInfo.apply(parent);

2.类式继承

(1)子对象的原型指向new的父对象

此方式只是通过原型链继承new出来的对象，子对象自己不能拥有和父函数一样的属性。

        function Parent(){
            this.name = ‘Lily‘;
            this.age = 23;
        }
        function Child(){

        }
        Child.prototype = new Parent();
        var child = new Child();
        console.log(child.name);//Lily

(2)使用构造函数

子对象只是拥有父函数的属性，而不能继承父函数的原型。

　　　　　function Parent(){
            this.name = ‘Lily‘;
            this.age = 23;
        }
        function Child(){
            Parent.apply(this);
        }
        var child = new Child();
        console.log(child.name);//Lily

(3)把上面的(1)和(2)结合使用

子对象自己拥有父函数的属性，同时也会继承父函数的原型，但是从父函数直接继承过来的自己的属性与new的父对象的属性重合。

　　　　 function Parent(){
            this.name = ‘Lily‘;
            this.age = 23;
        }
        Parent.prototype.run = function(){
            console.log(‘running‘);
        }
        function Child(){
            Parent.apply(this);
        }
        Child.prototype = new Parent();
        var child = new Child();
        console.log(child.name);//Lily
        child.run();//running

(4)把Parent的原型赋值给Child的原型

　　　　　function Parent(){
            this.name = ‘Lily‘;
            this.age = 23;
        }
        Parent.prototype.run = function(){
            console.log(‘running‘);
        }
        function Child(){
            Parent.apply(this);
        }
        Child.prototype = Parent.prototype;
        var child = new Child();
        console.log(child.name);//Lily
        child.run();//running

［1]javascript模式

js 继承

标签：

原文地址：http://www.cnblogs.com/fe-huahai/p/5656864.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行