使用callapplybind继承及三者区别

Posted 2021-02-19 Sofiaღ

js里的继承方法有很多，比如：使用原型链的组合继承、es6的Class、寄生继承以及使用call、apply、bind继承。再说继承之前，我们先简单了解下它们的区别。

一、区别：

同：三者都是改变函数执行时的上下文，说人话就是改变this的指向。

异：

1、bind()返回的其实是一个函数，并不会立即执行。

2、call()、apply()第二个参数有区别，call()的是一个值作为第二个参数，apply()的第二个参数则是一个数组：

        let obj = {
            name: ‘jack‘
        }

        function People(name) {
            this.name = name;
        }

        People.prototype = {
            sayHi(name) {
                console.log(`Hi,${name}~`)
            }
        }

        let child = new People(‘rose‘);

         child.sayHi.call(obj, ‘Sofia‘);
         child.sayHi.apply(obj, [‘Sofia‘]);

         let bind = child.sayHi.bind(obj, ‘Sofia‘);
         bind();

 

二、继承

        let obj = {
            name: ‘Sofia‘
        }

        function People(name) {
            this.name = name;
        }

        People.prototype = {
            sayHi() {

　　　　　　　　　　　console.log(`Hi Jack,I am ${this.name}~`)

            }
        }  

obj对象没有声明sayHi的方法，但是obj就是想跟帅哥杰克sayHi，并且告诉杰克她的芳名，但又不想声明sayHi方法，可不可以白嫖People这个构造函数里面的？当然可以。

        let child = new People(‘rose‘);

        child.sayHi.call(obj);
        child.sayHi.apply(obj);

        let bind = child.sayHi.bind(obj);
        bind();    

调用child的sayHi，并且改变它的this的指向为obj。