JavaScript中this指向的总结

关于javascript中this指向的总结

浏览器环境

在全局作用域中，this的指向是window对象

console.log(this);
//Window对象
console.log(this === window);
//true
复制代码

ES5函数中this的指向

在非严格模式下,函数中的this指向window对象，因为此时函数fn是window的一个属性，所以运行fn时，fn中的this指向window。其实this的指向就是指向函数的运行时环境。

var fn = function () {
    console.log(this);
    console.log(this === window);
}
fn(); 
//Window对象
//true
复制代码

在严格模式下，若不使用window调用函数，函数中的this指向undefined；使用window调用时，指向的时window对象。

var fn = function () {
    'use strict'
    console.log(this);
    console.log(this === window)
}
fn();
//undfined
//false
window.fn();
//Window对象
//true
复制代码

在严格模式下有一种例外的情况，就是在定时器中的this，此时无论使用window调用还是不使用window调用，this都指向window。

var fn = function () {
    'use strict'
    setTimeout(functioin(){
        console.log(this);
        console.log(this === window);
    },1000)
}
fn();
//Window对象
//true
复制代码

在ES6中箭头函数this的指向

在ES6中箭头函数this的指向取决于定义时环境中的this指向一致

var fun = () => {
    console.log(this);
    console.log(this === window);
}
fun();
//Window对象
//true
//定义箭头函数时,就是这个过程：()=>{...}所在的环境是window，所以运行fun()时，箭头函数内部的this指向window
复制代码

var obj = {
    name:'Jay',
    age:25,
    fn:()=>{console.log(this)},
    fun:function(){
        console.log(this)
    }
};
//在定义fn时，fn内部this的指向就是定义obj对象时所在的环境，obj所在的环境是window，所以调用obj.fn()时，返回的this就是Window对象
obj.fn(); //Window对象
obj.fun();//{name: "Jay", age: 25, fn: ƒ, fun: ƒ}
复制代码

var name = 'Kobe';
var obj = {
    name:'Jay',
    age:25,
    fn1:function(){
        return function(){
            console.log(this.name);
        }
    },
    fn2:() =>{
        return () => {
            console.log(this.name);
        }
    }
};
var fnn1 = obj.fn1();
var fnn2 = obj.fn2();
fnn1();//Kobe
fnn2();//Kobe
复制代码

在DOM事件中的this指向

DOM事件处理函数中this的指向是触发该事件的对象

<div id='app'>App</div>
<script>
   var $id = document.querySelector('#app');
   $id.onclick = function () {
       console.log(this);
   }
</script>
//当点击App时，console.log(this),打印出来的值时 <div id='app'>App</div>
复制代码

构造函数中的this指向

构造函数中的this的指向是通过构造函数所创建出的对象实例

function Person (){
    this.name = 'Jay',
    this.age = 25;
    console.log(this);
}
var p1 = new Person();
//Person {name: "Jay", age: 25}
复制代码

改变this的指向

可以使用call()、apply()、bind()改变函数内部this的指向（ES6中的箭头函数除外）。其中call()和apply()在传入要绑定的this指向时，立即执行。bind()在传入要绑定的this指向时，并不执行，需要再次调用才会执行。

使用call()改变this的指向

 var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.call(obj);
//true
//{name: "Jay", age: 25}
复制代码

使用apply()改变this的指向

 var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.apply(obj);
//true
//{name: "Jay", age: 25}
复制代码

使用bind()改变this的指向

 var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this===obj);
    console.log(this);
}
//fn.bind(obj);不会立即执行，需要再次调用才会执行。
var fn1 = fn.bind(obj);
fn1();
//true
//{name: "Jay", age: 25}
复制代码

需要注意的是，当使用call()、apply()、bind()改变函数内部this的指向时,如果传入的不是一个对象，会调用相对的构造函数，进行隐式类型装换。

function fn(){
    console.log(typeof this === 'object');
    console.log(this);
}
fn.apply('I am a string');
//true
//String{"I am a string"}
复制代码

转载于:https://juejin.im/post/5c9f457ff265da308939f0cd