前端知识点

配色方案

本页目录

this ​

介绍 ​

函数（箭头函数除外）在执行时，会在函数体内部自动生成一个 this 指针。谁 直接调用产生这个 this 指针的函数，this 就指向谁。

一般函数 this 是在函数调用的时候绑定，不是在函数定义的时候绑；
箭头函数是在定义的时候绑定到其外层的对象上。

  • 作为普通函数执行时，this 指向 window；
  • 当函数作为对象的方法被调用时，this 指向该对象；
  • 作为构造函数实例化对象调用时，this 指向返回的这个对象实例；
  • 箭头函数没有 this，它指向对应的父级对象；
  • call、apply、bind 显示绑定 this

题目 ​

1. 题目 ​

JS
var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var getName = person.sayName;
  getName(); 
  person.sayName(); 
  (person.sayName)();
  (b = person.sayName)(); 
}

sayName();
var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var getName = person.sayName;
  getName(); 
  person.sayName(); 
  (person.sayName)();
  (b = person.sayName)(); 
}

sayName();

答案:

JS
getName(); // window(独立函数调用)
person.sayName(); // person 对象调用
(person.sayName)(); // person 对象调用
(b = person.sayName)(); // window(赋值表达式，独立函数调用)
// window person person window
getName(); // window(独立函数调用)
person.sayName(); // person 对象调用
(person.sayName)(); // person 对象调用
(b = person.sayName)(); // window(赋值表达式，独立函数调用)
// window person person window

2. 题目 ​

JS
var name = 'window'

var person1 = {
  name: 'person1',

  foo1: function () {
    console.log(this.name)
  },

  foo2: () => console.log(this.name),

  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

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

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

person1.foo3()(); 
person1.foo3.call(person2)(); 
person1.foo3().call(person2); 

person1.foo4()(); 
person1.foo4.call(person2)(); 
person1.foo4().call(person2);
var name = 'window'

var person1 = {
  name: 'person1',

  foo1: function () {
    console.log(this.name)
  },

  foo2: () => console.log(this.name),

  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

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

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

person1.foo3()(); 
person1.foo3.call(person2)(); 
person1.foo3().call(person2); 

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

答案

JS
person1.foo1(); // person1(隐式绑定)
person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定) 

person1.foo2();  // window(箭头函数不绑定this，上层作用域是全局，this是window)
person1.foo2.call(person2); // window(箭头函数，上层作用域的this是window)

person1.foo3()(); // window(默认绑定，独立函数调用)
person1.foo3.call(person2)(); // window(默认绑定，独立函数调用) 
person1.foo3().call(person2); // person2(显示绑定)

person1.foo4()(); // person1(箭头函数，上层作用域的this是person1)
person1.foo4.call(person2)(); // person2(箭头函数，上层作用域的this是person2)
person1.foo4().call(person2); // person1(箭头函数，上层作用域的this是person1)

// 我的错误回答 person1 person2 person2 person2 window window person2 window window person2
person1.foo1(); // person1(隐式绑定)
person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定) 

person1.foo2();  // window(箭头函数不绑定this，上层作用域是全局，this是window)
person1.foo2.call(person2); // window(箭头函数，上层作用域的this是window)

person1.foo3()(); // window(默认绑定，独立函数调用)
person1.foo3.call(person2)(); // window(默认绑定，独立函数调用) 
person1.foo3().call(person2); // person2(显示绑定)

person1.foo4()(); // person1(箭头函数，上层作用域的this是person1)
person1.foo4.call(person2)(); // person2(箭头函数，上层作用域的this是person2)
person1.foo4().call(person2); // person1(箭头函数，上层作用域的this是person1)

// 我的错误回答 person1 person2 person2 person2 window window person2 window window person2

3. 题目 ​

JS
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.foo1.call(person2)

person1.foo2()
person1.foo2.call(person2)

person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)

person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
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.foo1.call(person2)

person1.foo2()
person1.foo2.call(person2)

person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)

person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
js
person1.foo1(); // person1(隐式绑定)
person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定) 

person1.foo2();  // window(箭头函数不绑定this，上层作用域是全局，this是window)
person1.foo2.call(person2); // window(箭头函数，上层作用域的this是window)

person1.foo3()(); // window(默认绑定，独立函数调用)
person1.foo3.call(person2)(); // window(默认绑定，独立函数调用) 
person1.foo3().call(person2); // person2(显示绑定)

person1.foo4()(); // person1(箭头函数，上层作用域的this是person1)
person1.foo4.call(person2)(); // person2(箭头函数，上层作用域的this是person2)
person1.foo4().call(person2); // person1(箭头函数，上层作用域的this是person1)
person1.foo1(); // person1(隐式绑定)
person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定) 

person1.foo2();  // window(箭头函数不绑定this，上层作用域是全局，this是window)
person1.foo2.call(person2); // window(箭头函数，上层作用域的this是window)

person1.foo3()(); // window(默认绑定，独立函数调用)
person1.foo3.call(person2)(); // window(默认绑定，独立函数调用) 
person1.foo3().call(person2); // person2(显示绑定)

person1.foo4()(); // person1(箭头函数，上层作用域的this是person1)
person1.foo4.call(person2)(); // person2(箭头函数，上层作用域的this是person2)
person1.foo4().call(person2); // person1(箭头函数，上层作用域的this是person1)

4. 题目 ​

JS
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()()
person1.obj.foo1.call(person2)() 
person1.obj.foo1().call(person2) 

person1.obj.foo2()()
person1.obj.foo2.call(person2)() 
person1.obj.foo2().call(person2)

// 答案 window window person2 obj person2 obj
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()()
person1.obj.foo1.call(person2)() 
person1.obj.foo1().call(person2) 

person1.obj.foo2()()
person1.obj.foo2.call(person2)() 
person1.obj.foo2().call(person2)

// 答案 window window person2 obj person2 obj