apply、call、bind

Tikitoo 发布于2019-08-19 17:13 / 2005人阅读

摘要：对象中的指向决定于函数被调用的方式。这是我们就需要用到这三个小家伙了来改变的指向。在这个新的函数对象中，被永久绑定到了的第一个参数上面，无论后期这个新的函数被如何使用。这一点对三者都适用。

在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式。
这是我们就需要用到这三个小家伙了：call、apply、bind来改变this的指向。

先来谈谈我们所熟知的call和apply

function add(c, d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:2};
add.call(o, 3, 4); // 10
add.apply(o, [5, 6]); // 14

需要注意的是，如果传入的第一个参数不是对象类型的，那么这个参数会被自动转化为对象类型，例如:

function age() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.call(7); // [object Number]

接下来说一下bind

ECMAScript 5引入了Function.prototype.bind。调用f.bind(someObject)会产生一个新的函数对象。在这个新的函数对象中，this被永久绑定到了bind的第一个参数上面，无论后期这个新的函数被如何使用。

function f(){
    return this.a;
}

var g = f.bind({a:"jack"});
console.log(g()); // jack

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, jack


function Person(name){
 this.nickname = name;
 this.distractedGreeting = function() {
 
   setTimeout(function(){
     console.log("Hello, my name is " + this.nickname);
   }, 500);
 }
}
 
var alice = new Person("Alice");
alice.distractedGreeting();
//Hello, my name is undefined


function Person(name){
  this.nickname = name;
  this.distractedGreeting = function() {
    setTimeout(function(){
      console.log("Hello, my name is " + this.nickname);
    }.bind(this), 500); // <-- this line!
  }
}
 
var alice = new Person("Alice");
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"


this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};
 
module.getX(); // 81
 
var getX = module.getX;
getX(); // 9, 因为在这个例子中，"this"指向全局对象
 
// 创建一个"this"绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); // 81

另外，如果第一个参数为null或者undefined的话，那么，实际上绑定到的是全局对象，即global。这一点对三者都适用。

function age() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.bind()(); // [object global]
bar.apply();  // [object global]
bar.call();   // [object global]

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

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

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

前端基础:call,apply,bind的的理解

摘要：和区别其实他们的作用是一样的，只是传递的参数不一样而已。接受个参数，第一个参数指定了函数体内对象的指向，第二个参数为数组或者一个类数组。看个栗子一个有意思的事在中，多次是无效的。而则会立即执行函数。背景前两天在做小程序的需求的时候用到bind的时候才想起自己对这三的东西的了解比较浅薄，这个时候用的时候就有点怕。时候还是要好好学习下，理解下怎么玩。正文先说call 和 apply...

netmou 2019-08-20 17:01 评论0 收藏0
JS中的call、apply、bind方法详解

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

zombieda 2019-08-23 15:27 评论0 收藏0
JS基础篇--call、apply、bind方法详解

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

lastSeries 2019-08-21 12:10 评论0 收藏0
this总结【2】—— call/apply和bind

摘要：和概览我们要将归为一类，单独归为一类三者的共同点是都可以指定和都是绑定在的原型上的，所以的实例都可以调用这三个方法至于为什么，看完这篇文章你就懂了如果你不懂什么是实例的话，请移步深入浅出面向对象和原型概念篇深入浅出面向对象和原型概念篇第一个 1.call/apply和bind概览我们要将call/apply归为一类，bind单独归为一类三者的共同点是都可以指定this call/...

wudengzan 2019-08-26 11:48 评论0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
javascript关于this 以及this的显示设置(apply、call、bind)

摘要：如果连续呢结果会是什么结果还是第一个原因是，在中，多次是无效的。更深层次的原因，的实现，相当于使用函数在内部包了一个，第二次相当于再包住第一次故第二次以后的是无法生效的。 this 1.其实js中的this没那么难理解，当找不到this时记住一句话：谁调我，我就指谁！new 谁指谁 function text1(){ console.log(this); //指wind...

LiveVideoStack 2019-08-21 11:20 评论0 收藏0