JS中对象继承方式

2021-09-23 00:06:55

JS对象继承方式

摘自《JavaScript的对象继承方式，有几种写法》，作者：peakedness

链接：https://my.oschina.net/u/3970421/blog/2872629

方式一：对象冒充

原理：构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使Parent构造函数称为Children的方法，然后调用它。Children会收到Parent的构造函数中定义的属性和方法。

//父类构造函数

var Parent = function(name){

    this.name = name;

    this.sayHi = function(){

        console.log("Hi" + this.name + ".");

    }

}

var Children = function(name){

    this.method = Parent;

    this.method(name);  //实现继承

    delete this.method;

    this.getName = function(){

        console.log(this.name);

    }

}

var P = new Parent("john");

var C = new Children("joe");

P.sayHi();      //Hi john

C.sayHi();      //Hi joe

C.getName();    //joe

方式二：原型链继承

原理：JS是一门基于原型的语言。在JS中prototype对象的任何属性和方法都被传递给那个类的所有实例。

//父类构造函数

var Parent = function(name){

    this.name = name;

    this.sayHi = function(){

        console.log("Hi" + this.name + ".");

    }

}

//子类构造函数

var Children = function(){};

Children.prototype = new Parent();

var P = new Parent();

var C = new Children();

P.sayHi();

C.sayHi();

注意：

调用Parent的构造函数，没有给它传递参数。这是原型链中的标准做法，要确保构造函数没有任何参数。

方式三：使用call或apply方法

原理：通过改变this指向实现继承。apply第二个参数必须是数组，call依次传入。

//父类构造函数

var Parent = function(name){

    this.name = name;

    this.sayHi = function(){

        console.log("Hi" + this.name + ".");

    }

};

//子类构造函数

var Children = function(name){

    Parent.call(this,name);

    this.getName = function(){

        console.log(this.name);

    }

};

var C = new Children("Joe");

C.sayHi();  //Hi john

C.getName();    //Joe

方式四：混合使用（推荐）

使用原型链就无法使用带参数的构造函数了

因此，在JS中创建类，最好使用构造函数定义属性，使用原型链定义方法。

//父类构造函数

var Parent = function(name){

    this.name = name;

}

Parent.prototype.sayHi = function(){

    console.log("Hi ! " + this.name + "!!!");

}

var P = new Parent("John");

P.sayHi();  //Hi John !!!

方式五：使用Object.create方法

Object.create方法会使用指定的原型对象及其属性去创建一个新的对象

//父类构造函数

var Parent = function(name){

    this.name = name;

}

Parent.prototype.sayHi = function(){

    console.log("Hi " + this.name + ".");

}

//子类构造函数

var Children = function(name,age){

    this.age = age;

    Parent.call(this,name);     //属性不在prototype上

};

Children.prototype = Object.create(Parent.prototype);

Children.prototype.constructor = Children;

Children.prototype.getAge = function(){

    console.log(this.age);

};

var P = new Parent("John");

var C = new Children("Joe",30);

P.sayHi();  //Hi John

C.sayHi();  //Hi Joe

C.getAge(); //30

注意：

当执行Children.prototype = Object.create(Parent.prototype)这个语句后，Children的constructor就被变为Parent，因此需要将Children.protype.constructor重新指定为Children本身。

constructor指向创建此对象的函数的引用。

方式六：extends关键字实现继承

class Paren{

    constructor(name,age){

        this.name = name;

        this.age = age;

    }

}

class Children extends Parent{

    constructor(name,age,job){

        super(name,age);    //super必须在前，否则代码报错

        this.job = job;

    }

}

注意：

子类的constructor方法没有调用super之前，就使用this关键字会报错。原因是：子类Children的构造函数之中的super(),代表调用父类Parent的构造函数。

super虽然代表了父类Parent的构造函数，但是返回的是子类Children的实例，即super内部的this指的是Children，因此super()在这里相当于Parent.prototype.constructor.call(this);

码农公寓