史上最全的 js中this详解

站长

2024年04月29日 15:25 · 阅读数 36

前言

我现在依然坚信一些js开发者虽然可以熟练的使用js内置函数和对象，也能够封装出出色函数，但是问题来了，你们在使用非箭头函数的时候this的创建和this判断是不是模糊不清，哈哈我也是，不过我最近总结了一些this的创建和this判断的资料，也包含了自己一些观点，作为分享，文章比较长，请耐心看看，如果有什么不足的地方或者理解错误的地方请留言一下，到时候咱们一起探讨😁。

为什么要用this

来直接上代码

 function foo(){
     console.log(`我本身属性a是   ${this.a}`)
 }
 
 var bar ={
     a:2,
     foo:foo
 }
 var baz={
     a:4,
     foo:foo
 }
 bar.foo();//我本身属性a是  2
 baz.foo()://我本身属性a是  4

小伙伴们是不是已经在这个简单的代码中发现了刚发foo只定义了一次，去可以被不同的对象引用，实现了代码共享

对this的误解

一般对this的误解分为两个方面

1 this是指向当前函数的本身
2 this 指向的是当前函数的作用域

接下来咱们看看代码中的是调试

this是指向当前函数的本身

下面代码中大家要理解函数的多面性，多个身份

普通的函数
普通的对象
构造函数

接下来讲用到函数的是两个身份普通函数、普通对象，看代码（）

function foo(){
    this.count++
}
var count=0;
foo.count=0;
for(var i=0;i<5;i++){
    
    foo()
}
console.log(foo.count)//0
console.log(count)//5

从打印的结果上来看显然，this指向的不是本身函数，当然咱们一般看到这类的问题咱们就会绕道而行，看代码

function foo(){
    this.count++
}
var bar={
    count:0
}
foo.count=0;
for(var i=0;i<5;i++){
    
    foo.call(bar)
}
console.log(bar.count)//5
console.log(count)//0

虽然这种解决方案很好，也会有其他的解决方案，但是我们还是不理解this的问题，心里还是有种不安之感

this 指向的是当前函数的作用域

接下来讲用到函数的是两个身份普通函数、普通对象，看代码（）

 function foo(){
     var num=2;
     console.log(this.num)
 }
 var num=0;
 foo()//0

咱们看到代码的执行结果后，发现this指向的并不是该函数的作用域。

this到底是什么

this是在函数调用的时候绑定，不是在函数定义的时候绑定。它的上下文取决于函数调用时的各种条件，函数执行的时候会创建一个活动记录，这个记录里面包含了该函数中定义的参数和参数，包含函数在哪里被调用（调用栈）...,this就是其中的一个属性。来看图

图中咱们看到this是在函数执行的时候创建的。

全面解析this

前面几步咱们已经确定的this的创建和this的指向的误区，接下啦咱们要看看this的绑定的规则，分为4个规则。

默认绑定
隐式绑定（上下文绑定）
显式绑定
new 绑定

默认绑定

默认绑定的字面意思就是，不满足其他的绑定方式，而执行的绑定规则。默认绑定会把this绑定到全局对象（是一个危险的操作，文章后面会说为什么）看代码

 function foo(){
     var num=2;
     this.num++
     console.log(this.num)
 }
 var num=0;
 foo()//1

上面代码中就实现了默认绑定，在foo方法的代码块中操作的是window.num++。

隐式绑定（上下文绑定）

定义：函数被调用的位置有上下文，或者是该函数的引用地址是不是被某个对象的属性引用，并通过对象的属性直接运行该函数。如果出现上述的情况，就会触发this的隐式绑定，this就会被绑定成当前对象看代码

function foo(){
    console.log(this.name)
}
var bar={
    name:'shiny',
    foo:foo
}
bar.foo()//shiny

要需要补充一点，不管你的对象嵌套多深，this只会绑定为直接引用该函数的地址属性的对象，看代码

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
var red={
    name:'red',
    obj:shiny
    
}
red.obj.foo()//shiny

隐式绑定的丢失

先看代码

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
function doFoo(fn){
    fn()
}
doFoo(shiny.foo)//undefind

大家知道函数参数在函数执行的时候，其实有一个赋值的操作，我来解释一下上面的，当函数doFoo执行的时候会开辟一个新的栈并被推入到全局栈中执行，在执行的过程中会创建一个活动对象，这个活动对象会被赋值传入的参数以及在函数中定义的变量函数，在函数执行时用到的变量和函数直接从该活动对象上面取值使用。看图 doFoo的执行栈

fn的执行栈

看下面原理和上面一样通过赋值，导致隐式绑定的丢失，看代码

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
var bar = shiny.foo
bar()//undefined

大家是不是已经明白了为什么是undefined，来解释一波，其实shiny的foo属性是引用了foo函数的引用内存地址，那么有把foo的引用地址赋值给了 bar 那么现在的bar的引用地址个shiny.foo的引用地址是一个，那么执行bar的时候也会触发默认绑定规则因为没有其他规则可以匹配，bar函数执行时，函数内部的this绑定的是全局变量。

看下满的引用地址赋值是出现的，奇葩隐式绑定丢失，看代码

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny',
    foo:foo
}
var red={
    name:'red'
}
(red.foo=shiny.foo)()//undefined

赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p.foo() 或者 o.foo()。根据我们之前说过的，这里会应用默认绑定。

显式绑定

call、apply绑定

javascript,在Function的porpertype上提供了3个方法来强行修改this，分别是 call、apply、bind，大家经常用的莫过于call和apply了，这两个函数的第一个参数，都是需要执行函数绑定的this，对于apply只有连个参数，第二个参数是一个数组，这个数组是要传入执行函数的参数，而call可以跟很多参数，从第二个参数起都会被传入到要执行函数的参数中

看代码

function foo(){
   console.log(this.age)
}
var shiny={
   age:20
}
foo.call(shiny)//20

function bar(){
console.log(this.age)
}
var red={
age:18
}
bar.apply(red)//18

这两个方法都是显式的绑定了tihs

硬绑定：

类似与 bind方法行为，是显式绑定的一种方式

function foo(b){
  return this.a+b
}
var obj={
  a:2
}
function bind(fn,obj){
  return function(){
     return fn.apply(obj,arguments)
  }
}
bind(foo,obj)(3)//5

语言解释：通过apply + 闭包机制实现bind方法，实现强行绑定规则

API调用的“上下文” 第三方库或者寄生在环境，以及js内置的一些方法都提供了一下 content 上下文参数，他的作用和 bind一样，就是确保回调函数的this被绑定

function foo (el){
  console.log(el,this.id)
}
var obj ={
 id:'some one'
};
[1,2,4].forEach(foo,obj)
// 1 some one 2 some one 4 some one

new 绑定

说道new 大家都会想到js的构造函数，咱们想不用着急new 绑定this的问题，咱们先看看咱们对js的构造函数的误解，传统面向类的语言中的构函数和js的构造函数时不一样

传统面向类的语言中的构函数，是在使用new操作符实例化类的时候，会调用类中的一些特殊方法（构造函数）
很多人认为js中的new操作符和传统面向类语言的构造函数是一样的，其实有很大的差别
从新认识一下js中的构造函数，js中的构造函数在被new操作符调用时，这个构造函数不属于每个类，也不会创造一个类，它就是一个函数，只是被new操作符调用。
使用new操作符调用构造函数时会执行4步
- 创建一个全新的对象
- 对全新的对象的__proto__属性地址进行修改成构造函数的原型（prototype）的引用地址
- 构造函数的this被绑定为这个全新的对象
- 如果构造函数有返回值并且这个返回值是一个对象，则返回该对象，否则返回当前新对象

咱们了解了js new 操作符调用构造函数时都做了些什么，哪么咱们就知道构造函数里面的this是谁了

代码实现

function Foo(a){
  this.a=a
}
var F = new Foo(2)
console.log(F.a)//2

绑定规则的顺序

咱们在上面了解this绑定的4大规则，那么咱们就看看这4大绑定规则的优先级。

默认绑定

咱们根据字面意思，都能理解只有其余的3个绑定规则无法触发的时候就会触发默认绑定，没有比较意义

显式绑定 VS 隐式绑定

看代码

function foo(){
    console.log(this.name)
}
var  shiny={
    name:'shiny',
    foo:foo
}
var red={
    name:'red'
}

shiny.foo()//shiny
shiny.foo.call(red)// red
shiny.foo.apply(red)// red
shiny.foo.bind(red)()//red

显然在这场绑定this比赛中，显式绑定赢了隐式绑定

隐式绑定 VS new 操作符绑定

看代码

function  foo(name){
    this.name=name
}
var shiny={
    foo:foo
}
shiny.foo('shiny')
console.log(shiny.name)//shiny

var red = new shiny.foo('red')
console.log(red.name)//red

显然在这场绑定this比赛中new 操作符绑定赢了隐式绑定

显式绑定（硬绑定） VS new 操作符绑定

使用call、apply方法不能结合new操作符会报错误

但是咱们可以是bind绑定this来比较显式绑定和new操作符的绑定this优先级。看代码

function foo(){
    console.log(this.name)
}
var shiny={
    name:'shiny'
}

var bar = foo.bind(shiny)
var obj = new bar();
console.log(obj.name)// undefind

显然 new操作符绑定战胜了显式绑定

this的判断

咱们在上面已经了解 4个绑定this的优先级。咱们可以列举出来

1 判断该函数是不是被new操作符调用，有的话 this就是构造函数运行时创建的新对象 var f = new foo()
2 判断函数是不是使用显式绑定 call、apply、bind，如果有，那么该函数的this就是这个三个方法的第一个参数 foo.call(window)
3 判断该函数是不是被一个对象的属性引用了地址，该函数有上下文（隐式绑定），在函数执行的时候是通过该对象属性的引用触发，这个函数的this就是当前对象的。 obj.foo();
4 上面的三种都没有的话，就是默认绑定，该函数的this就是全局对象或undefined（严格模式下）

绑定例外

😁 规则总是会有意外的，this绑定也是会有的，某些场面的绑定也是会出乎意料的，有可能触发了默认绑定看代码

function foo(){
    console.log(name)
}
var name ='shiny'
foo.call(null)//shiny
foo.call(undefined)//shiny
var bar = foo.bind(null)
var baz = foo.bind(undefined)
bar()//siny
baz()//siny

把 null、undefined通过 apply、call、bind 显式绑定，虽然实现可默认绑定，但是建议这么做因为在非严格的模式下会给全局对象添加属性，有时候会造成不可必要的bug。

更安全的this

咱们从上面知道在非严格模式下默认绑定是并操作this的话会该全局对象添加属性，这样的操作是有风险性的

function foo(a,b) {
console.log( "a:" + a + ", b:" + b );
}
// 我们的空对象
var ø = Object.create( null );
// 把数组展开成参数
foo.apply( ø, [2, 3] ); // a:2, b:3
// 使用 bind(..) 进行柯里化
var bar = foo.bind( ø, 2 );
bar( 3 ); // a:2, b:3

es6中的this

在es5及一下版本，我们被this深深的困惑，但是看完了上面的文章，应该判断this没有关系，但是重点来了 es6的this可以通过箭头函数直接绑定在该函数的执行的作用域上。看代码

 function foo(){
     return ()=>{
          console.log(this.name)
     }
 }
 var obj ={
     name:'obj'
 }
  var shiny ={
     name:'shiny'
 }
 var bar = foo.call(obj);
 bar.call(shiny)// foo

我们看到箭头函数的this被绑定到该函数执行的作用域上。

咱们在看看 js内部提供内置函数使用箭头函数

 function foo() {
    setTimeout(() => {
    // 这里的 this 在此法上继承自 foo()
    console.log( this.a );
    },100);
}
var obj = {
    a:2
};
foo.call( obj ); // 2

箭头函数可以像 bind(..) 一样确保函数的 this 被绑定到指定对象，此外，其重要性还体现在它用更常见的词法作用域取代了传统的 this 机制。实际上，在 ES6 之前我们就已经在使用一种几乎和箭头函数完全一样的模式。

function foo() {
var self = this; // lexical capture of this
setTimeout( function(){
    console.log( self.a );
    }, 100 );
}
var obj = {
    a: 2
};
foo.call( obj ); // 2

虽然 self = this 和箭头函数看起来都可以取代 bind(..)，但是从本质上来说，它们想替代的是 this 机制。如果你经常编写 this 风格的代码，但是绝大部分时候都会使用 self = this 或者箭头函数。如果完全采用 this 风格，在必要时使用 bind(..)，尽量避免使用 self = this 和箭头函数。

如有不足，在评论中提出，咱们一起学习

转载自:https://juejin.cn/post/6844903857554718733

史上最全的 js中this详解

前言

目录

为什么要用this

对this的误解

this是指向当前函数的本身

this 指向的是当前函数的 作用域

this到底是什么

全面解析this

默认绑定

隐式绑定（上下文绑定）

隐式绑定的丢失

显式绑定

call、apply绑定

硬绑定：

new 绑定

绑定规则的顺序

默认绑定

显式绑定 VS 隐式绑定

隐式绑定 VS new 操作符绑定

显式绑定（硬绑定） VS new 操作符绑定

this的判断

绑定例外

更安全的this

es6中的this

this 指向的是当前函数的作用域