阿孜去面试-this

59 阅读1分钟

this让人琢磨不透。普通函数因为随着调用它的对象而改变,箭头函数却始终是跟着自己的外层,不能被修改指向。是驾驶小船挑战未知的海域还是坐着大船安安稳稳呢。

Taka_splash.jpg >> 改变this的指向有哪些方法

<< call、apply、bind、箭头函数、使用_this = this

>> 有什么区别

<<

// call和apply改变this指向 只是后面带的参数不同
call(obj,e,e,e)
applay(obj,[e,e,e])

在非严格模式下使用 call 和 apply 时,如果用作 this 的值不是对象,则会被尝试转换为对象。null 和 undefined 被转换为全局对象

// bind需要调用
bind(obj)(e,e,e) 


// 普通函数 this 永远指向最后调用它的那个对象
// 箭头函数里面的this是由外层作用域来决定的,且指向函数定义时的this而非执行时
var name = "window";
function Person(name) {
  this.name = name;
  this.obj = {
    name: "obj",
    foo1: function () {
      return function () {
        console.log(this.name);
      };
    },
    foo2: function () {
      return () => {
        console.log(this.name);
      };
    },
  };
}
var person1 = new Person("person1");
var person2 = new Person("person2");

person1.obj.foo1()(); // 'window'
person1.obj.foo1.call(person2)(); // 'window'
person1.obj.foo1().call(person2); // 'person2'

person1.obj.foo2()(); // 'obj'
person1.obj.foo2.call(person2)(); // 'person2'
person1.obj.foo2().call(person2); // 'obj'
var name = "window";
function Person(name) {
  this.name = name;
  (this.foo1 = function () {
    console.log(this.name);
  }),
    (this.foo2 = () => console.log(this.name)),
    (this.foo3 = function () {
      return function () {
        console.log(this.name);
      };
    }),
    (this.foo4 = function () {
      return () => {
        console.log(this.name);
      };
    });
}
var person1 = new Person("person1");
var person2 = new Person("person2");

person1.foo1(); // 'person1'
person1.foo1.call(person2); // 'person2'

person1.foo2(); // 'person1'
person1.foo2.call(person2); // 'person1'

person1.foo3()(); // 'window'
person1.foo3.call(person2)(); // 'window'
person1.foo3().call(person2); // 'person2'

person1.foo4()(); // 'person1'
person1.foo4.call(person2)(); // 'person2'
person1.foo4().call(person2); // 'person1'