史上最全的 js中this详解

时间  2019-11-08
标签 史上 详解 栏目 JavaScript 繁體版
原文   原文链接

前言


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

目录


  • 为何要用this
  • 对this的误解
  • this究竟是什么
  • 全面解析this


为何要用this


来直接上代码javascript

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只定义了一次，去能够被不一样的对象引用，实现了代码共享java


对this的误解


通常对this的误解分为两个方面

  • 1 this是指向当前函数的自己
  • 2 this 指向的是当前函数的 做用域

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

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的问题，内心仍是有种不安之感
bash

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


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

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

我们看到代码的执行结果后，发现this指向的并非该函数的做用域。闭包


this究竟是什么


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

图中我们看到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 和箭头函数。

若有不足，在评论中提出，我们一块儿学习

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程