JavaScript面向对象学习call和apply改变this指向问题（二）

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

🔔🔔🔔感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！

如有疑问可以留言、评论，看到后会及时回复。  

 

 call和apply

区别：

 

•  当没有参数时，默认将this指向 window
• fn.apply(obj,argArray)      //argArray为数组
• fn.call(obj,arg1,arg2,arg3…)     //后面的参数为列表项
• 带参数时候它们接受的参数不同，apply的第二个参数只能接受一个数组，并且apply()只能是两个参数；而call()的第二个参数起接受的多个参数列表项，参数是可以多个。

简单示例：

var name = '林一';
var person = {
    name: '林二',
    say: function () {
        return "Hello, My name is " + this.name;
    }
}
var person1 = {
    name: '林三'
}
console.log(person.say()); // Hello, My name is 林二

打印结果：

 

 

 1.通过 call 和 apply 来this的指向时，不传任何参数，则默认为将this指向window

    var name = '林一';
    var person = {
      name: '林二',
      say: function () {
        return "Hello, My name is " + this.name;
      }
    }
    var person1 = {
      name: '林三'
    }

    // 当没有参数时，默认将this指向 window
    console.log(person.say.call()); // Hello, My name is 林二
    console.log(person.say.apply()); // Hello, My name is 林二

 

 2.有参数时，this 指向第一个参数：

    var name = '林一';
    var person = {
      name: '林二',
      say: function () {
        return "Hello, My name is " + this.name;
      }
    }
    var person1 = {
      name: '林三',
      say: function () {
        return "Hello, My name is " + this.name;
      }
    }


    // 将this指向 person1
    console.log(person.say.call(person1)); 
    console.log(person.say.apply(person1)); 

 

 3.接受的参数不同：

        function fn(x, y) {
            console.log('我想喝咖啡');
            console.log(this);
            console.log(x + y);


        }
        var o = {
            name: 'andy'
        };
        // fn();
      
        // call、apply 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象

        fn.call(o, 1, 2);
        fn.apply(o, [1,2]);

打印结果：

 

 

 👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。