我的JS笔记 -- 类

JS是没有类的，但JS可以利用构造函数实现近似类的功能。

构造函数

构造函数，是用来创建对象的函数。与普通的函数声明的区别是，约定函数名首字母大写，还有就是调用时要使用new关键字，如果不使用new调用就跟普通函数一样。

new关键字创建对象过程：

• 创建一个新的空对象；
• 设置新对象的constructor属性为构造函数的名称，设置新对象的proto属性指向构造函数的prototype对象；
• 将构造函数的作用域赋给新对象，this将指向这个新对象；
• 执行构造函数中的代码（为新对象添加属性）并返回新对象；

JS一般使用构造函数和原型配合实现类的功能：

    function F(val) { // 构造函数也是函数，所以可以传递参数
        // 检测函数的调用方式，确保构造函数以new操作符形式调用  
        if (!(this instanceof F)) {
            return new F(val);
        }

        // 构造函数中定义实例特有的属性和方法
        this.a = val; 
        this.arr = [];
    }
    // 原型中定义实例对象共享的属性和方法
    F.prototype.array = [];
    F.prototype.sayA = function () { 
        console.log(this.a);
    };
    F.prototype.sayArr = function () { 
        console.log(this.arr);
    };
    F.prototype.sayArray = function () { 
        console.log(this.array);
    };
    
    // 创建实例对象
    var f1 = new F(1);
    var f2 = new F(2);

    f1.arr.push(1); // 实例属性被更改后，实例对象不会共享
    f1.sayArr(); // [1]
    f2.sayArr(); // []

    f1.array.push(1); // 原型属性被更改后，实例对象会共享
    f1.sayArray(); // [1]
    f2.sayArray(); // [1]

类的继承

类有一个很重要的特征，就是类可以继承，在JS中通过原型链实现继承。

在JS中，是通过 原型链 来实现继承。

• 原型链继承，缺点是继承的属性和方法会被所有实例共享；

    function SuperColor() {
        this.colors = ['red', 'blue', 'green'];
    }
    SuperColor.prototype.sayColor = function () {
        console.log(this.colors);
    }
    function SubColor() {
  
    }
    SubColor.prototype = new SuperColor(); // SuperColor生成的实例作为SubColor的原型属性，这样SuperColor的属性会被共享
    var color1 = new SubColor();
    var color2 = new SubColor();
    color1.colors.push('black');
    color1.sayColor(); // ['red', 'blue', 'green', 'black']
    color2.sayColor(); // ['red', 'blue', 'green', 'black']
  

• 原型式继承，跟原型链继承特点一样，但它是创建一个在原型上继承了传入对象的空对象；

    // object会创建一个空对象，空对象的原型会继承传入参数o的属性和方法
    function object(o) {
        function F() {};
        F.prototype = o;
        return new F();
    }
    
    var obj  = {
        a: 1
    };
    var a = object(obj);
    a.a // 1
    // 然后可以给新建的对象添加实例属性或方法
    a.b = 2; 
    a.b // 2
  

  ES5通过Object.create()方法规范了原型式继承，Object.create()，接收两个参数一个用作新对象原型的对象（必须）和一个为新对象定义额外属性的对象（可选，作为实例属性）（写法同Object.defineProperties()方法一致）。

    // Object.create()方法传入一个参数时与上面的object()方法一样
    var obj  = {
        a: 1
    };
    var a = Object.create(obj);
    a.a // 1
    // 然后可以给新建的对象添加实例属性或方法
    a.b = 2; 
    a.b // 2
  
    var b = Object.create(obj, { // 第二个参数的会作为实例属性
        a: {
            value: 3
        }
    });
    b.a // 3，第二个参数定义实例属性的会屏蔽掉第一个参数原型继承的
  

  Object.create()方法可以创建一个不继承原型属性的空对象，Object.create(null)

• 寄生式继承，在原型式继承的基础再上封装一个函数，并在函数内部增强对象，缺点是不能做到函数复用；

    // 模板类似下面：
    function parasiticObject(o) {
        var obj = object(o);
        // 下面写要给对象添加的实例方法和属性
  
        return obj;
    }
    
    var obj  = {
        a: 1
    };
    var a = function (obj) {
        var o = object(obj);
        o.b = 2; // 这个会成为实例属性
    }
  
    a.a // 1
    a.b // 2
  

• 借用构造函数继承，利用call、apply继承，缺点是不能继承父类原型中的属性和方法；

    function SuperColor() {
        this.colors = ['red', 'blue', 'green'];
    }
    SuperColor.prototype.sayColor = function () {
        console.log(this.colors);
    }
    function SubColor() {
        // 利用call、apply将父类的属性和方法传给子类，这样缺点是不会继承父类的原型属性和方法
        SuperColor.call(this); // 实例之间不会共享数据，之间都是独立的，还有个好处是可以传递参数
    }
    var color1 = new SuperColor();
    var color2 = new SubColor();
    var color3 = new SubColor();
    color2.colors.push('black');
  
    color1.sayColor(); // ['red', 'blue', 'green', 'black']
    color2.sayColor(); // TypeError: color2.sayColor is not a function，父类原型上的方法没有继承
    
    // 子类继承父类的实例属性且不会共享
    color2.colors // ['red', 'blue', 'green', 'black']
    color3.colors // ['red', 'blue', 'green']
  

• 组合式继承，利用原型链继承和借用构造函数函数继承，让两者相互补充，既能继承实例也能共享原型，缺点是无论什么情况都会调用两次父类的构造函数，父类的实例属性和方法会被创建两次，子类的实例和原型都会有父类的实例属性和方法，只是实例中的属性和方法会屏蔽掉原型中同名的属性和方法；

    function SuperColor() {
        this.colors = ['red', 'blue', 'green'];
    }
    SuperColor.prototype.sayColor = function () {
        console.log(this.colors);
    }
    function SubColor() {
        SuperColor.call(this); // 第二次调用父类作为子类的实例对象，并屏蔽掉原型中的同名属性或方法
    }
    SubColor.prototype = new SuperColor(); // 第一次调用父类创建实例对象作为子类的原型     
  
    var color1 = new SubColor();
    var color2 = new SubColor();
    color1.colors.push('black');
  
    color1.sayColor(); // ['red', 'blue', 'green', 'black']
    color2.sayColor(); // ['red', 'blue', 'green']
  

• 寄生组合式继承，通过借用构造函数来继承属性，通过原型链的混成形式来继承方法；

    function SuperColor() {
        this.colors = ['red', 'blue', 'green'];
    }
    SuperColor.prototype.sayColor = function () {
        console.log(this.colors);
    }
    function SubColor() {
        SuperColor.call(this); // 只调用一次父类的构造函数
    }
    SubColor.prototype = Object.create(SuperColor.prototype); // 通过原型式继承将要继承的对象赋值给子类原型
  
    var color1 = new SubColor();
    var color2 = new SubColor();
    color1.colors.push('black');
  
    color1.sayColor(); // ['red', 'blue', 'green', 'black']
    color2.sayColor(); // ['red', 'blue', 'green']
  

更多文章在 这里 ，觉得不错希望点个 star