this指向

在函数调用中(指向window)

function demo() {
  console.log(this);
}
demo(); //window

在对象调用函数中(指向调用这个函数的对象)

let Obj = {
  name: "LLC",
  say: function() {
    console.log(this);
  }
}
Obj.say(); //Obj对象
let func = Obj.say;
func(); //window

在构造函数中(指向实例出来的对象)

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  console.log(this);
}
let p = new Person('LLC', '男');  //Person的实例对象p

在 call apply bind 中(指向替代对象)

let Obj1 = {
  name: "LLC",
  say: function() {
    console.log(this);
  }
}
let Obj2 = {
  name: "ASJ"
}
Obj1.say.call(Obj2);  //{name: "ASJ"}

在箭头函数中(指向调用这个函数的外层对象)

Example_01:
let Obj = {
  name: "LLC",
  say: () => {
    console.log(this);
  }
}
Obj.say(); //window
Obj调用say函数,Obj的外层对象是window

Example_02:
function Person(name) {
  let Obj = {};
  Obj.name = name;
  Obj.say = () => {
    console.log(this);
  }
  return Obj;
}
let p = new Person();
p.say();  //Person{} Person对象

new 会创建一个和Person同名空对象,
Person{}
然后把这个对象赋给 this ,
let this = {}
再通过 this 为这个新的对象赋予和 Person 相同的属性,成为:
Person{
  Obj{
    name
    say()
  }
}
最后返回出 this 指向的新对象, 也就是实例(此处的实例p)
因为是 return Obj,所以指向的新对象是以 Obj 为模板的新对象:
p {
  name
  say
}
而不是以 Person 为模板的新对象:
Person {
  p {
    name
    say
  }
}

p 调用 say 的外层就是 Person{}

箭头函数的缺点

箭头函数没有arguments
工厂函数:
let Obj = {
  say: function () {
    console.log(arguments);  //Arguments(2) [1, 2, ......
  }
}
Obj.say(1,2);

箭头函数
let Obj = {
  say:() => {
    console.log(arguments);  //arguments is not defined
  }
}
Obj.say(1,2);

在原型链上不能使用箭头函数

function Person(gender) {
  this.gender = gender;
}
Person.prototype.say = function(){  //可以
  console.log(this.gender);
}
Person.prototype.say = () => {  //不可以
  console.log(this.gender);
}

构造函数中不能使用箭头函数

let Person = gender => {  //不行
  this.gender = gender;
}

箭头函数 call apply bind 不能改变 this 的指向

let Obj = {
  name: "LLC",
  say: () => {
    console.log(this.name);
  }
}
let Obj1 = {
  name: "ASJ"
}
Obj.say.call(Obj1); //undefined  apply bind 同

如果发现错误,还望不吝赐教

posted on 2021-08-09 01:57  In-6026  阅读(37)  评论(0)    收藏  举报

导航