浏览器环境
在全局作用域中，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"}
网友评论