js对象继承的几种方式

Dear 丶 2022-04-11 03:38 334阅读 0赞

**1.对象冒充**

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

![20181204164834507.png][]

在上面的代码中，在children函数里面调用了parent，将parent赋给了this.method，也就是说此时的this.method指向了parent，下一行代码就执行了this.method，相当于将name传给了parent然后执行了一次，此时children就拥有了parent的属性和方法了。

而为什么不直接执行parent呢？而是在里面执行呢？因为在函数内this是指向window（因为函数执行时，实际是window调用了它，也就是window.函数名();那么，里面的this指向当前调用该函数的对象，就是window。）。当把parent赋值给children的method的时候，this就指向了children的实例了。

**2.原型链继承**

在JavaScript中，某个对象中的prototype中所有的属性和方法都会被赋予它对应的实例。

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

**3.使用call或者apply**

这两个函数都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。因为this总是指向调用某个方法的对象，但是使用call和apply的时候，就会改变this的指向。

apply的用法：

window.number = 'one';
    
            document.number = 'two';
    
    
    
            var s1 = {number: 'three' };
    
            function changeColor(){
    
                console.log(this.number);
    
            }
    
    
    
            changeColor.apply();         //one (默认传参)
    
            changeColor.apply(window);   //one
    
            changeColor.apply(document); //two
    
            changeColor.apply(this);     //one
    
            changeColor.apply(s1);       //three

不同点：

*  apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
 *  call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。

**4.混合方式**

对象冒充方法的主要问题是必须使用构造函数方式。但是使用原型链，就无法使用带有参数的构造函数了。那么如何选择最好的继承方式呢，那就是两者都用。在JavaScript中创建类的最好方式就是用构造函数定义属性，用原型定义方法。

在上面的代码中，父类和子类中都是在函数体内些属性，将方法些在了prototype属性中，也就是用构造函数定义属性，用原型定义方法。

此外，子类CHildren在构造函数中使用call来继承父类Parent的属性，**在原型中继承父类的原型**。

**5.使用Object.create()方法**

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

**6.extends关键字实现**

class Parent{
    
        constructor(name,age){
    
            this.name = name;
    
            this.age = age;
    
        }
    
        sayHi(){
    
            console.log("hi "+this.name);
    
        }
    
    }
    
    class Children extends Parent{
    
    
    
        constructor(name,age,job){
    
            super(name,age);
    
            this.job = job;
    
        }
    
        getJob(){
    
            console.log(this.job);
    
        }
    
    }
    
    let p =  new Parent("john",23);
    
    let c =  new Children("joe",22,"teacher");
    
    
    
    p.sayHi();
    
    c.sayHi();
    
    c.getJob();

![20181204164834711.png][]

[20181204164834507.png]: /images/20220411/d6c06957c09a466686ba4293fe3a3fee.png
[20181204164834711.png]: /images/20220411/ed8b0413a7a043358ca27c422873dd5f.png