【前端工程师手册】JavaScript之this的笔记

roland_reed 发布于2019-08-22 17:32 / 1743人阅读

摘要：函数别名是全局对象的属性显式绑定一个小栗子和第一个参数是一个对象，它们会把这个对象绑定到，接着在调用函数时指定这个。

今天总结一下this。

误解

熟悉Java或者其他语言的同学看到this会想当然的认为this指向函数本身，然而在JavaScript中并不是这样子。

function func(){
    console.log(this.index)
}
func.index  = 123
func() // undefined

结果很显然，this并不是指向函数自身。

this到底是什么

那么this到底是什么呢？
当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。
长话短说：this就是函数执行上下文的一个属性
this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

this的绑定规则

默认绑定
举个栗子：

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

当调用 foo() 时，this.a 被解析成了全局变量 a。为什么?因为在本例中，函数调用时应用了 this 的默认绑定，因此 this 指向全局对象。
那么我们怎么知道这里应用了默认绑定呢?可以通过分析调用位置来看看 foo() 是如何调用的。在代码中，foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。
但是此时如果使用了严格模式(strict mode)，那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined：

   function foo() { 
       "use strict";
        console.log( this.a );
    }

   var a = 2;
   foo(); // TypeError: this is undefined

隐式绑定

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a: 2,
       foo: foo 
   };
   obj.foo(); // 2

调用位置会使用 obj 上下文来引用函数，因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。
当 foo() 被调用时，它的落脚点确实指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj，因此 this.a 和 obj.a 是一样的。
这种绑定方式的反面即是this的隐形丢失。

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a: 2,
       foo: foo 
   };
   var bar = obj.foo; // 函数别名!
   var a = "oops, global"; // a 是全局对象的属性
   bar(); // "oops, global"

显式绑定
一个小栗子：
call和apply

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a:2
   };
   foo.call( obj ); // 2

第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象，因此我们称之为显式绑定。
bind

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

由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind
bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数

new绑定
使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建(或者说构造)一个全新的对象。

这个新对象会被执行[[原型]]连接。

这个新对象会绑定到函数调用的this。

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
例如：

  function foo(a) { 
      this.a = a;
  }
  var bar = new foo(2); 
  console.log( bar.a ); // 2

四种绑定规则的优先级

首先，默认绑定的优先级是四条规则中最低的

function foo() { 
    console.log( this.a );
}
var obj1 = { 
    a: 2,
    foo: foo 
};
var obj2 = { 
    a: 3,
    foo: foo 
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

结论：显式绑定 > 隐式绑定

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

结论：new 绑定 > 隐式绑定优先级

function foo(something) { 
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 ); 
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2 
console.log( baz.a ); // 3

结论：new绑定 > es原生bind绑定
总结判断this的方法：

函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。var bar = new foo()

函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是指定的对象。var bar = foo.call(obj2)

函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上下文对象。var bar = obj1.foo()

如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。var bar = foo()

参考资料：
你不知道的JavaScript-上卷

私有云云服务器 javascript的this javaScript中的this javascript中this详解优秀的前端工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95274.html

【前端工程师手册】this拾遗之关于箭头函数的种种

摘要：之前总结了的一些常见绑定情况前端工程师手册之的笔记，但是还有一些没有说到，今天继续学习一下。参考资料箭头函数你不知道的上卷之前总结了this的一些常见绑定情况（【前端工程师手册】JavaScript之this的笔记），但是还有一些没有说到，今天继续学习一下。 es6箭头函数先说结论：箭头函数没有自己的this，它是根据外层(函数或者全局，后面会说到箭头函数作为某个对象的方法时的情况...

oogh 2019-08-26 11:55 评论0 收藏0
【前端工程师手册】JavaScript之原型

摘要：又是一个比较重要的知识点原型。且和指向了同一个对象。可以是使用做什么创建对象的数据共享把一些实例共享的属性和方法放在原型上，节约空间。基于原型链的委托继承这个原型继承的关系可以用图来表示参考资料深入之从原型到原型链强大的原型和原型链又是一个比较重要的知识点——原型（prototype）。一个例子 function F() {} var f = new F() F.prototype...

Darkgel 2019-08-22 17:29 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0