`

js this绑定 call apply bind 用法

    博客分类:
  • js
阅读更多

   一直以来虽然经常用到call,apply,bind三种方法,但是对其具体的用法区别总是模模糊糊,今天终于查明白了。

 

1.call

 

   首先看个例子

var name = "czm"
var me = {
   name: 'lgs'
};
var you = {
   name: 'cy'
};
 
function getUserName() {
    console.log(this.name);
}
 
getUserName();           //=>czm
getUserName.call(me);    //=>lgs
getUserName.call(you);  //=>cy

    在第一次直接调用getUserName函数后,函数的关键字的绑定对象为全局对象,同时在 全局对象中name属性是czm,所以也就产生了 czm

 

  第二次、第三次getUserName通过call 方法指明this的绑定对象

apply方法就指定this的绑定对象来说,方法相同,不同的地方是参数的传递的用法不同

 

 

var me = {
   name: 'lgs',
   lover : null
};
var you = {
   name: 'cy',
   lover:null
};
 
function getUserLover(lover) {
    console.log(this.name + " love " +lover);
}
 
getUserLover.call(me, 'cy');    //=>lgs love cy
getUserLover.apply(you,['lgs']);  //=>cy love lgs

  call方法第一个参数指定this绑定对象,后面可以添加多个参数,相当于对getUserLover传参,而apply方法第一个参数和call相同,指定this的绑定对象,第二个参数为数组,数组内顺序指定getUserLover方法的参数

 

  call方法和apply方法都会调用getUserLover方法,而bind方法,回返回一个新的函数,

 

 

var get_user_lover = getUserLover.bind(me); //指定this绑定对象
get_user_lover("cy");  // 顺序传参和普通方法的调用相同 => lgs love cy

 

 

 

分享到:
评论

相关推荐

    原生JS实现 call apply bind

    都是用来改变this的指向,在平时工作过程中,除了实现对象的继承,在写一些基础类,或者公用库方法的时候会用到它们,其他时候 call 和 apply 的应用场景并不多。 在React中bind常用来绑定事件,改变this的指向 call...

    开启Javascript中apply、call、bind的用法之旅模式

    为了控制函数的this指向,JavaScript提供了apply、call以及bind方法。以下详细解释了apply、call以及bind的用法,并通过实例加深理解。 1. apply()和call()方法 apply()和call()方法都用于指定函数体内this的值。...

    Javascript中call,apply,bind方法的详解与总结

    本文针对JavaScript中三个重要的函数方法——call、apply和bind,进行详尽的分析,并在文章的结尾部分对这三个方法之间的联系和区别进行了概括,以便于读者更深入地理解它们的用途和应用场景。 首先,我们来探讨...

    浅谈javascript中的call、apply、bind_.docx

    其实,ES5 引入 bind 的真正目的是为了弥补 call/apply 的不足,由于 call/apply 会对目标函数自动执行,从而导致它无法在大事绑定函数中使用,而 bind 在实现转变函数 this 的同时又不会执行对应的函数。...

    【JavaScript源代码】JavaScript函数之call、apply以及bind方法案例详解.docx

    JavaScript中的call、apply和bind方法都是用来改变函数调用时的上下文(即this值)以及传递参数。它们之间的相同点在于,都能够指定函数执行时的this对象,并且都能接收参数。不同点在于它们的调用方式和执行时机。 ...

    js代码-JavaScript的call/apply/bind函数实现

    在JavaScript中,`call()`, `apply()`, 和 `bind()` 是三个非常重要的函数,它们都与函数调用有关,但各自有不同的应用场景。本文将深入探讨这三个函数的实现原理及其使用方式。 首先,`call()` 函数允许我们调用一...

    javascript中apply、call和bind的使用区别

    在JavaScript中,`apply()`, `call()`, 和 `bind()` 都是用来操作函数的上下文,即改变函数内部 `this` 指向的方法。它们有三个共同点:第一,它们都能改变函数执行时的 `this` 值;第二,第一个参数都是指定的新 `...

    关于JS中的apply,call,bind的深入解析.docx

    JavaScript 中的 `apply`、`call` 和 `bind` 都是用来操控函数调用时 `this` 指向的三个关键方法。它们允许开发者在不同的上下文中执行函数,这对于面向对象编程和函数式编程非常重要。下面我们将深入解析这三个方法...

    javascript中call,apply,bind函数用法示例

    在JavaScript中,`call`, `apply`, 和 `bind` 是三个非常重要的函数,它们都用于改变函数内部 `this` 的指向。下面将详细介绍这三个函数的功能、使用方法以及它们之间的区别。 1. **call() 函数** `call()` 函数...

    javascript中apply/call和bind的使用

    总结来说,apply()、call()和bind()在JavaScript中都是非常重要的方法,它们可以控制函数内部的this指向,允许参数的灵活传递,并且可以创建可重用的函数,从而提升代码的模块性和灵活性。通过理解这些方法的使用...

    js代码-generator apply call bind

    在JavaScript编程中,`generator`、`apply`、`call`和`bind`是四个非常重要的概念,它们各自扮演着不同的角色,对于理解和编写高效、灵活的代码至关重要。接下来,我们将详细探讨这些知识点。 首先,`generator`是...

    JavaScript必知必会(十) call apply bind的用法说明

    在JavaScript中,`call`, `apply`, 和 `bind` 是函数对象的三个核心方法,它们都与函数调用时的上下文(`this` 的值)以及参数传递有关。理解这三个方法是深入学习JavaScript的关键。 1. **call()**: - `call()` ...

    javascript中call apply 与 bind方法详解

    在JavaScript中,`call`、`apply`和`bind`都是与函数调用相关的三个重要方法,它们都允许我们改变函数内部`this`的指向,从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...

    浅谈javascript中的call、apply、bind

    JavaScript中的call、apply和bind方法是Function对象自带的三个用于改变函数this指向的关键方法。理解这些方法有助于我们更好地掌握函数式编程和面向对象编程的高级技巧。 首先,我们来了解call方法。call方法可以...

    JS中改变this指向的方法(call和apply、bind)

    本文将详细介绍三种在JavaScript中改变`this`指向的方法:`call`、`apply`以及`bind`。 1. `call`方法: 当我们需要在其他对象的上下文中执行某个函数时,可以使用`call`方法。`call`接受两个参数:第一个参数是想...

    跟我学习javascript的call(),apply(),bind()与回调

    本文将详细解释JavaScript中call(), apply(), 和 bind() 方法的作用、语法以及使用场景,并且会探讨回调函数的使用,帮助理解这些概念在实际编程中的应用。 首先,我们来探讨call() 和 apply() 方法。这两个方法都...

    深入理解JavaScript中的call、apply、bind方法的区别

    call、apply和bind是JavaScript中用于改变函数内部this指向的三个方法。虽然它们的作用都是为了改变函数的上下文,但它们在使用方式和用途上存在一些差异。 首先,我们来看call方法。call方法的第一个参数是作为...

    前端大厂最新面试题-bind_call_apply.docx

    前端大厂最新面试题-bind_call_apply ..._bind、call、apply 三者都可以改变函数的 this 对象指向,但它们的使用方法和返回结果不同。其中,apply 和 call 会立即执行,而 bind 返回一个永久改变 this 指向的函数。

    JavaScript高级-this绑定规则+箭头函数

    3. **显式绑定**:使用`call()`、`apply()`或`bind()`方法可以显式地设置`this`的值。`call()`和`apply()`会立即执行函数,而`bind()`则返回一个新函数,保持`this`的绑定。 ```javascript function foo(name) { ...

Global site tag (gtag.js) - Google Analytics