当前位置:主页 > 网站优化 >

Javascript中关于this绑定机制的解析

作者: 奕星SEO 分类: 网站优化 发布时间: 2019-08-16 13:54 内容来源:网络整理阅读量:

Javascript中关于this绑定机制的解析

前言

《你不知道的JavaScript》这本书里面关于this绑定机制的部分讲的特别好,很清晰,这部分对我们js的使用也是相当关键的,并且这也是一个面试的高频考点,所以整理一篇文章分享一下这部分的内容,相信看本文的解析,你一定会有所收获的,如果喜欢的话可以点波赞/关注,支持一下。

个人博客了解一下:obkoro1.com

为什么要用this: <code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">identify</span>() </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello,I'm "</span> + <span class="hljs-keyword">this</span>.name); } <span class="hljs-keyword">let</span> me = { <span class="hljs-attr">name</span>: <span class="hljs-string">"Kyle"</span> }; <span class="hljs-keyword">let</span> you = { <span class="hljs-attr">name</span>: <span class="hljs-string">"Reader"</span> }; identify.call(me); <span class="hljs-comment">// Hello,I'm Kyle</span> identify.call(you); <span class="hljs-comment">// Hello,I'm Reader</span> </code>

这个简单的栗子,可以在不同的对象中复用函数identify,不用针对每个对象编写一个新函数。

this解决的问题:

this提供了一种更优雅的方法来隐式’传递’一个对象的引用,因此可以将API设计得更加简洁并且易于复用

this的四种绑定规则: 默认绑定:

规则:在非严格模式下,默认绑定的this指向全局对象,严格模式下this指向undefined

<code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>() </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.a); <span class="hljs-comment">// this指向全局对象</span> } <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>; foo(); <span class="hljs-comment">// 2</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo2</span>() </span>{ <span class="hljs-meta"> "use strict"</span>; <span class="hljs-comment">// 严格模式this绑定到undefined</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.a); } foo2(); <span class="hljs-comment">// TypeError:a undefined</span> </code>

默认绑定规则如上述栗子,书中还提到了一个微妙的细节:

<code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>() </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.a); <span class="hljs-comment">// foo函数不是严格模式 默认绑定全局对象</span> } <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo2</span>()</span>{ <span class="hljs-meta"> "use strict"</span>; foo(); <span class="hljs-comment">// 严格模式下调用其他函数,不影响默认绑定</span> } foo2(); <span class="hljs-comment">// 2</span> </code>

所以:对于默认绑定来说,决定this绑定对象的是函数体是否处于严格模式,严格指向undefined,非严格指向全局对象。

通常不会在代码中混用严格模式和非严格模式,所以这种情况很罕见,知道一下就可以了,避免某些变态的面试题挖坑。

隐式绑定:

规则:函数在调用位置,是否有上下文对象,如果有,那么this就会隐式绑定到这个对象上。

<code> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>() </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.a); } <span class="hljs-keyword">var</span> a = <span class="hljs-string">"Oops, global"</span>; <span class="hljs-keyword">let</span> obj2 = { <span class="hljs-attr">a</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">foo</span>: foo }; <span class="hljs-keyword">let</span> obj1 = { <span class="hljs-attr">a</span>: <span class="hljs-number">22</span>, <span class="hljs-attr">obj2</span>: obj2 }; obj2.foo(); <span class="hljs-comment">// 2 this指向调用函数的对象</span> obj1.obj2.foo(); <span class="hljs-comment">// 2 this指向最后一层调用函数的对象</span> <span class="hljs-comment">// 隐式绑定丢失</span> <span class="hljs-keyword">let</span> bar = obj2.foo; <span class="hljs-comment">// bar只是一个函数别名 是obj2.foo的一个引用</span> bar(); <span class="hljs-comment">// "Oops, global" - 指向全局</span> </code>

隐式绑定丢失:

隐式绑定丢失的问题:实际上就是函数调用时,并没有上下文对象,只是对函数的引用,所以会导致隐式绑定丢失。


本文链接地址:http://www.seohuizhou.com/webyouhua/1514.html
上一篇:<<为了提升技术一定要学会使用这两个在线网站!
下一篇:怎样才能在有限时间内尽可能高效率地学习前端?>>