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

相关文章
|
2天前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
|
9天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
10天前
|
JavaScript 前端开发
关于javascript中call(),apply(),bind()的介绍,初步
关于javascript中call(),apply(),bind()的介绍,初步
|
12天前
|
JavaScript 前端开发 数据安全/隐私保护
|
13天前
|
自然语言处理 JavaScript 前端开发
js_关键字this指向哪里?
js_关键字this指向哪里?
4 0
|
15天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
8 1
|
1月前
|
自然语言处理 JavaScript 前端开发
解析JavaScript中的this:新手常见误区与应对策略
【4月更文挑战第1天】本文介绍了JavaScript中`this`的关键作用及其常见误区,包括作用域与调用上下文混淆、回调函数中的`this`绑定、构造函数使用、对象字面量方法与普通函数的区别以及严格模式的影响。通过理解四条绑定规则(显式、new、隐式、默认)和采取相应避免策略,开发者能更好地掌握和运用`this`,提高编程效率和代码质量。
19 1
|
2月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
4月前
|
前端开发 JavaScript Java
【面试题】JavaScript 中 call()、apply()、bind() 的用法
【面试题】JavaScript 中 call()、apply()、bind() 的用法
|
4月前
|
前端开发 JavaScript
【面试题】 JavaScript 中 call()、apply()、bind() 的用法
【面试题】 JavaScript 中 call()、apply()、bind() 的用法

热门文章

最新文章