Js中this指向问题总结
this的默认指向
-
全局环境下的this指向了window
console.log(this) // window -
函数独立调用，函数内部的this也指向了window
function fn(){ console.log(this) // window } -
被嵌套的函数独立调用时，this默认指向了window
var a= 0; var obj= { a: 2, foo: function (){ //函数当做对象的方法来调用this指向了obj var that = this; function test(){ console.log(that.a); // 2 console.log(this.a); // 0 } test(); } } obj.foo(); -
IIFE 自调用函数内部的this也指向window
-
闭包this默认指向了window
var a= 0; var obj= { a: 2, foo: function (){ var that = this; return function test(){ return this.a } } } var fn = obj.foo(); console.log(fn()); // 0
隐式绑定
当函数当做方法来调用,this指向了直接对象
function foo(){
console.log(this.a);
}
var obj = {
a: 1,
foo: foo,
obj2:{
a: 2,
foo: foo
}
}
// foo()函数的直接对象是obj, this的指向指向了直接对象
obj.foo(); // 1
// foo()函数的直接对象是obj2,this的指向指向了直接对象
obj.obj2.foo(); // 2
隐式丢失
隐式丢失就是指被隐式绑定的函数丢失了绑定对象从而默认绑定到window
这种情况比较容易出错却又非常常见
函数别名
var a = 0;
function foo(){
console.log(this.a)
}
var obj = {
a: 1,
foo: foo
}
// 把obj.foo()赋值给别名bar,造成隐式丢失的情况。因为只是把obj.foo()赋值了bar变量。而bar与obj对象毫无关系
var bar = obj.foo();
bar(); // 0
参数传递
var a = 0;
function foo(){
console.log(this.a)
}
function bar(fn){
fn()
}
var obj = {
a: 1,
foo: foo
}
// 把obj.foo当做参数传递到bar函数中,有隐式的函数赋值fn=obj.foo,只是把foo函数赋值给了fn,而fn与obj对象毫无关系，所以当前foo函数内部的this指向了window
bar(obj.foo) // 0
内置函数
var a = 0;
function foo(){
console.log(this.a)
}
var obj = {
a: 1,
foo: foo
}
// setTimeout( )和setInterval()第一个参数的回调函数中的this默认指向了window,跟第二种情况是累死
setTimeout(obj.foo, 1000) // 0
间接调用
var a = 0;
function foo(){
console.log(this.a)
}
var obj = {
a: 1,
foo: foo
}
var p = {
a: 2
}
// 隐式绑定，函数当做对象中的方法来使用，内部的this指向了该对象
obj.foo() //1
// 将obj.foo函数对象赋值给p.foo函数，然后立即执行。相当于仅仅是foo()函数的立即调用，内部的this默认指向了window
(p.foo = obj.foo)() // 0
// 将obj.foo赋值给p.foo函数,之后p.foo()函数再执行,其实是属于p对象的方法的指向,this指向了当前的p对象
p.foo = obj.foo
p.foo() // 2
显式绑定
显式绑定
call(), apply(), bind()把对象绑定到this上,叫做显示绑定
var a = 0;
function foo(){
console.log(this.a)
}
var obj = {
a: 1,
foo: foo
}
foo() // 0
foo.call(obj) // 1
foo.apply(obj) // 1
foo.bind(obj) // 1
硬绑定
硬绑定是显示绑定的一个变种,使得this不能再被改变
var a = 0;
function foo(){
console.log(this.a)
}
var obj = {
a: 1,
foo: foo
}
var bar = function(){
foo.call(obj)
}
bar(); // 1
setTimeout(bar, 1000) // 1
数组的forEach map()…
var id = 'window';
function fn(el){
console.log(el, this.id);
}
var obj={
id: fn
}
var arr = [1,2,3];
arr.forEach(fn); // this指向window
arr.forEach(fn,obj); // this指向obj
new绑定
1.如果是new关键来执行函数相当于构造函数来实例化对象，那么内部的this指向了当前实例化的对象
function fn(){
console.log(this);
}
var fn = new fn();
console.log(fn); // fn
var person = {
fav: function (){
return this;
}
}
var p= new person.fav();
console.log(p); // fav
// 实例化出来的对象内部的属性 constructor属性指向了当前的构造函数
console.log(p.constructor == person.fav) // true
严格模式下this的指向
独立调用的函数内部的this指向了undefined
functibn fn(){
'use strict';
console.log(this);
}
fn(); // undefined
严格模式下，函数apply()和call()内部的this始终是它们的第一个参数
var color = 'red'
function showColor(){
'use strict'
console.log(this)
console.log(this.color)
}
showColor.call(undefined)