关于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"}
复制代码