javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript中this保持正确指向

在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作用
bindbind()方法用于将函数体内的this绑定到某个对象,然后返回一个新函数。
call函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。
applyapply方法的作用与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 操作符做了什么?

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保持正确指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文