在JavaScript中让this保持正确的指向的解决方案
作者：Tiffany
这篇文章主要介绍了关于在 JavaScript 中如何让 this 保持正确的指向的解决方案,文中给大家介绍了三种解决方案,使用闭包,使用箭头函数和换绑 this这三种方法,文中有详细的代码示例供大家参考,需要的朋友可以参考下
对象的方法中 this 的指向
以一个代码例子，来对切入对对象的方法中 this 的指向的讨论，例子如下：
const obj = {
prop: 'I am an object',
logProp: function() {
const func = function(){
console.log(this.prop);
}();
}
};
obj.logProp()// 期望打印 obj 的 prop 属性， I am an object
方案一：使用闭包
实现方式：
const obj = {
prop: 'I am an object',
logProp: function() {
let context = this;
const func = function(){
console.log(context.prop);
}();
}
};
obj.logProp()
原始代码：
const obj = {
prop: 'I am an object',
logProp: function() {
const func = function(){
console.log(this.prop);
}();
}
};
obj.logProp()// 期望打印 I am an object
原始代码可以理解为：
const temp = function(){
console.log(this.prop);
}
const obj = {
prop: 'I am an object',
logProp: function() {
temp(); // 相当于在全局作用域直接调用temp函数。
}
};
obj.logProp()
浏览器中 JavaScript 函数执行的方式是当前执行函数入栈，执行结束则出栈。
执行 logProp 函数后，这一函数已经出栈，temp 函数入栈，没有历史栈，相当于在全局作用域直接调用 temp 函数，因此 this 指向全局对象，而不是 obj 对象。
因此在外层函数 logProp 中定义一个变量 context ，保存指向 obj 的 this，在 func 中使用这个变量。logProp函数出栈时，因为 func 中用到了 context，因此这个变量会留在栈内，这就是闭包。而 func 中可以通过这个变量，访问到指向 obj 的 this。
方案二：使用箭头函数
实现方式：
const obj = {
prop: 'I am an object',
logProp: function() {
const func = ()=>{
console.log(this.prop);
};
func();
}
};
obj.logProp()
箭头函数没有自己的 this 对象，对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是箭头函数没有自己的 this 对象，内部的 this 就是定义时上层作用域中的 this。也就是说，箭头函数内部的this指向是固定的，固定指向函数定义时的作用域。
方案三：换绑 this
普通函数可以使用 bind、call、apply 来换绑this。
| API | 作用 |
|---|---|
| bind | bind()方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。 |
| call | 函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。 |
| apply | apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。 |
在本文给出的代码示例问题中，用 bind 或 call 即可满足需求。
用 bind 实现
实现方式：
const obj = {
prop: 'I am an object',
logProp: function() {
const func = function(){
console.log(this.prop);
}.bind(this);
func();
}
};
obj.logProp()
bind 的具体实现：
Function.prototype.bind = function(context, args){
if(typeof this !=='function'){
throw new Error('Function.prototype.bind - what is trying to be bound is not callable')
}
const self = this;
const func = function(){
self.call(this instanceof self?self:context, args.concat(Array.prototype.slice.call(arguments)) )
}
const fNOP = function(){}
fNOP.prototype = this.prototype;
func.prototype = new fNOP();
return func;
}
用 call 实现
const obj = {
prop: 'I am an object',
logProp: function() {
const func = (function(){
console.log(this.prop);
}).call(this)
}
};
obj.logProp()
call 的具体实现
function myCall(context, ...args){
let context = context || window;
context.fn = this;
const res = eval('context.fn(...args)');
delete context.fn;
return res;
}
新创建的实例中this的指向
function MyClass() {
this.prop = 'I am a property';
}
const instance = MyClass();
console.log(instance); // 错误，this指向全局对象而不是新创建的实例
解决方案：使用 new 操作符。
function MyClass() {
this.prop = 'I am a property';
}
const instance = new MyClass();
console.log(instance); // 正确，this 指向新创建的实例
new 操作符做了什么？
- 创建一个空对象，作为将要返回的对象实例。
- 将这个空对象的原型，指向构造函数的prototype属性。
- 将这个空对象赋值给函数内部的this关键字。
- 开始执行构造函数内部的代码。
function objectFactory() {
const args = [].slice.call(arguments);
const constructor = args.shift();
const context = Object.create(constructor.prototype);
const result = constructor.apply(context, args);
const flag = result !== null && typeof constructor === "object";
return flag ? result : context;
}
let actor = _new(Person, "张三", 28);
结束语
到此这篇关于在JavaScript中让this保持正确的指向的解决方案的文章就介绍到这了,更多相关JavaScript中this保持正确指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！