JavaScript继承原型继承组合式继承

什么是继承

继承就是凡是自己没有的东西拿过来自己用,让它成为自己的就是继承

在js里有两种继承模型

>1.原型继承
>2.组合继承

原型继承

如果有一个对象有某一个行为(属性或方法),将这个行为加到原型对象中,那么这个对象就继承自原型对象,获得了该行为

那么如何使用原型对象呢?

>1.利用对象的动态特性添加成员

>2.利用覆盖原型对象

>2.利用组合式继承添加原型成员

>1.利用对象的动态特性添加成员

var o = {};
o.name = 'jack';//这个就是利用动态特性添加

var Person = function () {
    Person.prototype.say = function () {
    console.log('hello world); } } 

此时原型对象是对象,可以利用动态特性随时添加成员,
添加的成员都会被构造函数创建的对象所继承

>2.利用覆盖原型对象

var Person = function () {};
Person.prototype.say = function () {
console.log('hello world');
}
Person.prototype.say1 = function () {};
Person.prototype.say2 = function () {};

//如果需要添加很多内容
var Person = function () {};
Person.prototype = {
    say1 = function() {},
    say2 = function () {},
    say3 = function () {}
};
var p = new Person();
console.log(p.constructor.name);

并没有打印Person,这里由person对象创建出来的是个Object类型,因为没有添加constructor,覆盖原型对象一定要给新对象添加一个constructor属性,当然除非你对类型要求不严格

 Person.prototype = {
      constructor:Person,
      say1:function (){},
      say1:function () {},
      say1:function () {}
  };

组合继承

组合式继承将其他的对象的成员加到自己身上
只有当前对象,加一个循环,不会牵扯到其他对象

语法格式:对象.extend( 对象 )

    var o1 = {name:'jack',age:26};
    var o2 = {
        love:{
            food:apple,
            movie:The Sixth Sense
        }
    } ;
    //让o2继承自o1
    //把o1加到o2上
    for( var k in o1){
        o2[k] = o1[k];
    }

由于fon in循环中对象可以随意的替代,因为o2可以继承任意的对象
因此这个继承方法叫组合式继承
为了简化代码给o2添加一个方法叫extend

o2.extend = function (obj){
    for ( var k in obj){
    this[k] = obj[k];
    }
}
o2.extend(o1);//继承
o2.extend({
    id:function (id){
    },
    tag:function (tag){
    }
})

在实际开发中,如果希望获得一个继承自对象o的对象可以使用ES5提供的Object.create方法

新对象Object.create(作为原型对象的对象)返回的是新对象,它会创建一个新对象,让他继承自参数对象o1

var o1 = { name:'jack'};
var o2 = Object.create(o1);

这种继承的缺点:没办法确定类型
而且ie8里面Object没有create

创建新对象就有构造函数,继承对象就有原型对象

function create( obj ) {
    fuction F() {}
    //要有继承 还需要原型
    F.prototype = obj;
    return new F();
}
var o3 = create(o1);

怎么样让IE8调用creat?

我们在开发中,为了兼容所有的浏览器有两种办法

1.在原生对象中提供方法添加相应功能

2.通用函数形式,不会污染内置对象

操作的时候调用函数的时候判断是否有这个方法,如果有就用没有就自己实现

1.在原生对象中提供方法添加相应功能

if( !Object.create ) {
    Object.create = function ( obj ) {
        function F() {}
        F.prototype = obj;
        return new F();
    }
}

var o4 = create(o1);

2.通用函数形式,不会污染内置对象

var create = function (obj){
    if(Object.create){
        return Object.create(obj);
    }else{
        function F() {}
        F.prototype = obj;
        return new F();
    }
}
var o5 = create(obj);

无论浏览器是否支持该方法,都应该使用自己定义的方法来完成,但是在方法内部,判断浏览器是否具有该功能,如果有该功能,则用浏览器提供的,如果浏览器不支持该功能则自己实现