目录
1 本质
this本质就是一个对象
2 this指向
1 对象调用
this
指向该对象(前边谁调用 this 就指向谁)。
let name = "Bob";
let age = 18;
function print(){
console.log(this);
console.log(this.name, this.age);
}
let obj = {
name: "Jack",
age: 19,
print: print
}
//1 对象调用
obj.print();
/*返回值
* { name: 'Jack', age: 19, print: [Function: print] }
Jack 19
* */
2 直接调用的函数
this
指向的是全局 window
对象。严格模式下,直接调用函数中的this指向undefined。(注意node开发环境和谷歌浏览器中开发环境下所得的值有所不同,以下使用的是谷歌浏览器)
//"use strict"
function print() {
console.log(this);
}
//2 直接调用
print(); //
/*返回值
* 非严格模式下 Window{...} ---里面一堆Window对象的属性以及。。
* 严格模式下返回 undefined
*/
let obj = {
fun: function () {
console.log(this);
}
}
let fun = obj.fun;
fun();
/*返回值
* 非严格模式下 Window{...} ---里面一堆Window对象的属性以及。。
* 严格模式下返回 undefined
*/
console.log(this); //两种模式下都是Window{...}
3 通过 new
的方式
this
永远指向新创建的对象。
这里构造函数中的this指向person
function Person(name, age) {
this.name = name;
this.age = age;
console.log(this);
console.log(this.age);
}
let person = new Person("Bob", 16); //使用new的时候就已经调用了构造函数
/*返回值
* Person { name: 'Bob', age: 16 }
16
*/
4 箭头函数中的 this
由于箭头函数没有单独的 this
值。箭头函数的 this
与声明所在的上下文相同。也就是说调用箭头函数的时候,不会隐士的调用 this
参数,而是从定义时的函数继承上下文
对象没有上下文
var a = 1; //在浏览器环境下定义的是Window中的属性
let b = 3 //在浏览器环境下定义的不是Window中的属性
function person() {
let a = 2;
let b = 6;
return print = () => {
console.log(this); //箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
console.log(this.a, this.b);
}
}
person()();
/*返回值
*Window {}
* 1 undefined
* */
console.log(this.b === b); //false
console.log(this.a === a); //true
const obj = {
a:()=>{
console.log(this);
}
}
// 对象调用箭头函数
obj.a(); // window
3 如何改变this的指向
我们可以通过调用函数的 call、apply、bind 来改变 this的指向。
百里于2020年5月2日
如果有错,请您指出!如有侵权,请联系我删除!