【JavaScript】难点1-继承

一、创建对象

1、工厂模式

用函数来封装以特定接口创建对象的细节

function createPerson (name,age,job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        alert(this.name);
    };
    return o;
}
var person = createPerson("vicky",20,"student");

缺点:没有解决对象识别的问题。

2、构造函数模式

function Person (name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function () {
        alert(this.name);
    };
}
var person = new Person("vicky",20,"student");

注:
        1、任何函数只要通过new操作符调用,就可以作为构造函数;
        2、问题:每个方法都要在实例上重复一遍。

3、原型模式

function Person(){}
Person.prototype.name = "vicky";
Person.prototype.age = 20;
Person.prototype.job = "student";
Person.prototype.sayName = function () {
    alert(this.name);
};
var person = new Person();

无论什么时候,只要创建了一个心函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象,原型对象都有要给constructor属性指向prototype属性所在的函数。
这里写图片描述
每当代码读取某个对象的某个属性时,都会执行一次搜索,搜索首先从对象实例本身开始,若找不到,则搜索指针指向的原型对象。
使用对象字面量来定义原型:

function Person () {}
Person.prototype = {
    constructor:Person,
    name:"vicky",
    age:20,
    job:"student",
    sayName:function () {
        alert(this.name);
    }
}

使用对象字面量,使得construtor不在指向Person构造函数,所以,在需要的时候可以以显示的设置constructor属性

问题:
        1、省略掉了为构造函数传递初始化参数,使得所有实例在默认情况下都取得相同的属性值;
        2、属性共享。

4、组合模式 (最常用*)

组合使用构造函数模式和原型模式,使用构造函数定义实例属性,用原型模式定义方法和共享属性。

function Person (name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {
    constructor:Person,
    sayName:function (){
        alert(this.name);
    }   
}

5、动态原型模式

把所有信息都封装在构造函数中,通过在构造函数中初始化原型。

function Person (name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName!="function"){
        Person.prototype.sayName = function () { 
            alert(this.name);
        };
    }
}

6、寄生构造函数

创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

function Person (name,age,job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () { 
        alert(this.name);
    };
    return o;
}

构造函数返回的对象与在构造函数外部创建的对象没有什么不同,不推荐使用。

7、稳妥构造函数模式

稳妥对象:没有公共属性,且其方法也不引用this对象。
与寄生构造函数类似,不同之处:
1、新创建对象的实例方法不引用this;
2、不使用new调用构造函数

二、继承

依靠原型链实现继承

1、原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法

        function SuperType () {
            this.value = "super";
        }
        SuperType.prototype.getSuperValue = function () {
            return this.value;
        };

        function SubType () {
            this.subValue = "sub";
        }
        SubType.prototype = new SuperType ();//继承父类
        SubType.prototype.getSubValue = function () {
            return this.subValue;
        }
        var instance = new SubType();
        console.log(instance.getSubValue());//sub
        console.log(instance.getSuperValue());//super

问题:
        1、包含引用类型的原型属性会被所有实例共享;
        2、创建子类型的实例时,不能向父类的构造函数中传递参数

2、借用构造函数

基本思想:在子类型构造函数的内部调用超类型的构造函数

//借用构造函数实现继承
        function Father () {
            this.array = [1,2,3];
        }
        function Son () {
            Father.call(this);
        }
        var instance = new Son();
        instance.array.push(5);
        var instance3 = new Son();
        console.log(instance.array);//[1,2,3,5]
        console.log(instance3.array);//[1,2,3]

通过使用call(),在新创建的子类实例的环境下调用了父类的构造函数

问题:方法都在构造函数中定义,因此函数无法复用。

3、组合继承

思路:使用原型链实现对原型共享属性和方法的继承,使用借用构造函数来实现对实例属性的继承

        function Super (name) {
            this.name = name;
            this.array = [1,2,3];
        }//父类
        Super.prototype.sayName = function () {
            console.log(this.name);
        };//父类原型的方法
        function Sub (name,age) {
            Super.call(this,name);//继承父类属性
            this.age = age;
        }//子类
        Sub.prototype = new Super();//继承父类方法
        Sub.prototype.constructor = Sub();
        Sub.prototype.sayAge = function () {
            console.log(this.age);
        };
        var a = new Sub("vicky",20);
        a.array.pop(1);
        a.sayName();//vicky
        a.sayAge();//20
        var b = new Sub("jay",37);
        console.log(b.array);//[1,2,3]
        console.log(a.array);//[1,2]

4、原型式继承

function object(o) {
    function F(){}
    F.prototype = o;
    return new F();
}
    var Chinese = {
    nation:'中国'
  };
    function object (o) {
        function F() {}
        F.prototype = o;
        return new F();
    }

    var Student = object(Chinese);
    Student.job = "xuesheng";
    alert(Student.nation);//“中国”

先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的新实例。

5、寄生式继承

创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象

function createAnother(original) {
    var clone = Object(original);
    clone.sayHi = function (){ 
        console.log("hi");
    };
    return clone;
}

6、寄生组合式继承

通过借用构造函数来继承属性,通过原型链来继承方法

function inheritPrototype (subType,superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值