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

相关文章
|
25天前
|
JavaScript
js【详解】call()、apply()、bind()方法
js【详解】call()、apply()、bind()方法
25 6
|
21天前
|
JavaScript
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
11 0
|
23天前
|
JavaScript
JS【详解】函数.bind()
JS【详解】函数.bind()
9 0
|
23天前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
19 0
|
23天前
|
JavaScript 前端开发
|
1月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
1月前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
|
1月前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
21 0
|
2月前
|
中间件
在 Egg.js 应用中,你可以通过 `this` 关键字来获取上下文
在 Egg.js 应用中,你可以通过 `this` 关键字来获取上下文
54 1
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护

热门文章

最新文章