JS:Function对象call、apply、bind改变this指向

简介: JS:Function对象call、apply、bind改变this指向

文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function


语法

Function.length // 返回形参个数
Function.name //  返回函数实例的名称
Function.prototype.call(thisArg, arg1, arg2, ...)
Function.prototype.apply(thisArg, [arg1, arg2, ...]) // 调用给定this值的函数
Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]]) // 创建一个新的函数

1、对象中的this

var name = 'Tom';
let obj = {
  name: this.name,
};
console.log(obj);
// Chrome
// {name: "Tom"}
// Node.js
// { name: undefined }

2、函数中的this

let tom = {
  name: 'Tom',
  sayHello() {
    //   this 默认指向了tom 对象
    console.log(`name is ${this.name}`);
  }
};
let jack = {
  name: 'Jack',
};
tom.sayHello();
// name is Tom
// 改变 this指向
tom.sayHello.call(jack);
// name is Jack
tom.sayHello.apply(jack);
// name is Jack
// 注意bind之后需要再次调用执行
tom.sayHello.bind(jack)();
// name is Jack

参考

javascript中call()、apply()、bind()的用法终于理解

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

相关文章
|
19天前
|
存储 编译器 C语言
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题(下)
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题
31 5
|
19天前
|
算法 编译器 C语言
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题(中)
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题
23 2
|
19天前
|
算法 编译器 C语言
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题(上)
从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题
15 1
|
1月前
|
前端开发 JavaScript
前端 JS 经典:apply、call、bind
前端 JS 经典:apply、call、bind
44 0
|
1月前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
1月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
26 2
|
1月前
|
存储 算法 对象存储
【C++入门到精通】function包装器 | bind() 函数 C++11 [ C++入门 ]
【C++入门到精通】function包装器 | bind() 函数 C++11 [ C++入门 ]
24 1
|
1月前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
1月前
|
JavaScript 前端开发
关于javascript中call(),apply(),bind()的介绍,初步
关于javascript中call(),apply(),bind()的介绍,初步
|
1月前
|
JavaScript
call、apply、bind的使用场景区分(js的问题)
call、apply、bind的使用场景区分(js的问题)

热门文章

最新文章