JS基础——call、bind、apply 和 this

asce1885 发布于2019-08-26 13:33 / 2206人阅读

摘要：是在运行时进行绑定的，它的指向取决于它的调用位置。调用位置为当前正在执行的函数的前一个调用中。我们可以可以通过修改为来达到目的。返回要执行的函数，需要的时候再执行。箭头函数箭头函数会继承外层函数调用的绑定

this

首先我们分析一下下面代码的执行结果

function foo(num) {
     console.log( "foo: " + num );
     this.count++;  //记录函数执行次数
}
foo.count = 0;
function test(){
    for(let i = 0 ; i < 4; i++){
        foo(i)
    }
    console.log("foo执行次数："+foo.count)
}
test()

执行结果如下：

foo: 0
foo: 1
foo: 2
foo: 3
foo执行次数：0

由此可见this指向的并不是函数自身。this 是在运行时进行绑定的，它的指向取决于它的调用位置。我们可以通过分析调用栈来找到函数的调用位置。（调用位置为当前正在执行的函数的前一个调用中）。当我们在第一个例子中增加debugger,在浏览器工具中可以清晰的看到函数的调用栈：

foo函数的调用位置在test函数中，此时this的指向默认绑定为window，而不是foo对象。我们可以可以通过修改this.count为foo.count来达到目的。

绑定

this的绑定规则有：默认绑定、隐式绑定、显式绑定、new绑定，上面函数调用中this就是默认绑定。

new绑定

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

当使用new调用foo函数时，会构造一个新对象并把它绑定到 foo

显式绑定

我们可以通过call、bind、apply来改变this的指向。call、apply本质上没有区别，都是立即执行，只是第二个参数的传值方式不一样。bind返回要执行的函数，需要的时候再执行。(bind后的函数当使用new执行时，绑定无效)

function foo() { 
     console.log(this.a);
}
var obj = { 
     a:2
};
var fn = foo.bind( obj );
fn()   //2
new fn()  //undefined

隐式绑定

当函数存在上下文对象时会影响调用位置

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

我们来看另一个例子

function foo() { 
 console.log( this.a );
}
function doFoo(fn) {
 // fn 其实引用的是 foo
 fn(); // <-- 调用位置！
}
var obj = { 
 a: 2,
 foo: foo 
};
var a = "oops, global"; 
doFoo( obj.foo );

此时fn函数会丢失上下文绑定的对象。

箭头函数

箭头函数会继承外层函数调用的 this 绑定

云服务器 GPU云服务器 JS中bind、call和apply的作 js中的call和apply apply与call的区别 js的apply()

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

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

JS基础篇--call、apply、bind方法详解

摘要：首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。而则会立即执行函数。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 评论0 收藏0
回味JS基础:call apply 与 bind

摘要：使用方法调用匿名函数在下例中的循环体内，我们创建了一个匿名函数，然后通过调用该函数的方法，将每个数组元素作为指定的值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个方法，这个方法可以打印出各元素在数组中的正确索引号。原文：回味JS基础:call apply 与 bind 在JavaScript中，call、apply和bind是Function对象自带的三个方法...

plokmju88 2019-08-19 17:47 评论0 收藏0
【js基础】之this,call,apply,bind

摘要：的使用场景作为构造函数执行作为对象属性执行作为普通函数执行。要在执行时才能确认值，定义时无法确认改变上下文指向。 1.this this的使用场景： 1.作为构造函数执行； 2.作为对象属性执行； 3.作为普通函数执行； 4.call apply bind。 this要在执行时才能确认值，定义时无法确认 var a = { name:A, fn:function()...

khs1994 2019-08-22 16:47 评论0 收藏0
js 面试官想了解你有多理解call,apply,bind?

摘要：返回值这段在下方应用中有详细的示例解析。回调函数丢失的解决方案绑定回调函数的指向这是典型的应用场景绑定指向，用做回调函数。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this...

wuaiqiu 2019-08-26 10:33 评论0 收藏0
JS系列之call & apply & bind

摘要：参考链接在中，和是对象自带的三个方法，都是为了改变函数体内部的指向。返回值是函数方法不会立即执行，而是返回一个改变了上下文后的函数。而原函数中的并没有被改变，依旧指向全局对象。原因是，在中，多次是无效的。参考链接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变...

xiaochao 2019-08-23 13:09 评论0 收藏0