像数学公式一样彻底简单理解JavaScript函数调用与this 指针
一直以来,大家都对函数的调用有很多的疑惑,特别是this指针的指向。
其实理解了核心的原理之后,就很容易理解,甚至就是套用数学公式一样!
核心原理
让我们看看原始的函数调用语句,也就是call方法
1 |
|
test.call(“Warren”, “you”) //=> Warren loves you
可以看到,我们调用了test方法,并且把this指向Warren,传入参数you。这就是javascript函数调用的核心概念。其他函数都可以参考这个概念。
简单的函数调用
若果每次调用函数都用call,会变得很麻烦。Javascript允许我们直接调用test(“you”),其实就相当于
1 |
|
但是这个在ECMAScript的strict模式会变成:
1 |
|
概括就是两条公式:
fn(…args) 就相当于 fn.call(window [ES5-strict: undefined], …args).
(function() {})() 就相当于 (function() {}).call(window [ES5-strict: undefined).
成员函数
另一种常见的函数调用方法就是obj.test()
.
1 |
|
可以看到this指向了obj,我们之前是单独声明test,再看看如果将它我们关联给其他对象。
1 |
|
this指针根据调用者的变化而变化!
试下Function.prototype.bind
有时候需要根据调用者来改变this指向,这可以用简单闭包来实现
1 |
|
套用之前的公式
fn(…args) 就相当于 fn.call(window [ES5-strict: undefined], …args).
boundTest(“you”); => boundTest(window,”you”),但是我们在boundTest里面已经将test的this指向了obj!
让我们改造一下这个函数:
1 |
|
要理解上面的代码,只需要知道2点。
- apply 与 call的区别只是 apply接受的参数是数组,call接受的参数是参数列表。
- arguments 是像类数组的某个函数的所有参数
bind函数返回一个数组,每次调用的时候绑定this并且接受新的参数。
上面只是为了更好理解,其实es5本来就有一个bind函数
1 |
|
以上大概就是JavaScript函数调用与this 指针的基本原理,只要记住这两条公式,基本就不虚了。
fn(…args) 就相当于 fn.call(window [ES5-strict: undefined], …args).
(function() {})() 就相当于 (function() {}).call(window [ES5-strict: undefined).
- 本文作者:Warren
- 本文链接:http://unclewarren.cn/2017/11/24/%E5%83%8F%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F%E4%B8%80%E6%A0%B7%E5%BD%BB%E5%BA%95%E7%AE%80%E5%8D%95%E7%90%86%E8%A7%A3JavaScript%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E4%B8%8Ethis%20%E6%8C%87%E9%92%88/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!