JavaScript中this

目录

1 本质

2 this指向

1 对象调用

2 直接调用的函数

3 通过 new的方式

4 箭头函数中的 this

3 如何改变this的指向

---

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日

如果有错，请您指出！如有侵权，请联系我删除！