Js中this指向问题总结

this的默认指向

1. 全局环境下的this指向了window

   console.log(this) // window

2. 函数独立调用，函数内部的this也指向了window

   function fn(){console.log(this) // window}

3. 被嵌套的函数独立调用时，this默认指向了window

   var a= 0;var obj= {a: 2,foo: function (){//函数当做对象的方法来调用this指向了objvar that = this;function test(){console.log(that.a); // 2console.log(this.a); // 0}test();}}obj.foo();

4. IIFE 自调用函数内部的this也指向window

5. 闭包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指向了windowbar(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.foop.foo() // 2

显式绑定

显式绑定

call()

,

apply()

,

bind()

把对象绑定到this上,叫做显示绑定

var a = 0;function foo(){console.log(this.a)}var obj = {a: 1,foo: foo}foo() // 0foo.call(obj) // 1foo.apply(obj) // 1foo.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(); // 1setTimeout(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指向windowarr.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)