脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript中this保持正确指向

在JavaScript中让this保持正确的指向的解决方案

 更新时间：2024年01月19日 11:11:47   作者：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 操作符做了什么？

  • 创建一个空对象，作为将要返回的对象实例。
  • 将这个空对象的原型，指向构造函数的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保持正确指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js拖动div 当鼠标移动时整个div也相应的移动

    js拖动div 当鼠标移动时整个div也相应的移动

    要拖动的div为最外层的div，这段代码对显示对话框的头部绑定鼠标监听事件，当鼠标移动时，整个div也相应的移动，具体的实现如下，感兴趣的朋友可以参考下
    2013-11-11
  • JavaScript实现登录窗体

    JavaScript实现登录窗体

    这篇文章主要为大家详细介绍了JavaScript实现登录窗体，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS ES6中setTimeout函数的执行上下文示例

    JS ES6中setTimeout函数的执行上下文示例

    这篇文章主要给大家介绍了关于JS ES6中setTimeout函数的执行上下文的相关资料，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
    2017-04-04
  • JavaScript验证API的使用

    JavaScript验证API的使用

    本文主要介绍了JavaScript验证API的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • CSS、JS文件无法正确加载至页面问题与解决办法分享

    CSS、JS文件无法正确加载至页面问题与解决办法分享

    这篇文章主要给大家介绍了关于CSS、JS文件无法正确加载至页面问题与解决办法,文中通过图文以及代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • JavaScript 预解析的4种实现方法解析

    JavaScript 预解析的4种实现方法解析

    这篇文章主要介绍了JavaScript 预解析的4种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript变量声明详解

    JavaScript变量声明详解

    本文详细向大家介绍了javascript变量声明，并通过示例进行了具体分析，是篇非常不错的文章，这里推荐给刚入门的jser。
    2014-11-11
  • JS截取字符串实例详解

    JS截取字符串实例详解

    这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下
    2015-11-11
  • js实现下拉框效果（select）

    js实现下拉框效果（select）

    本文主要介绍了js实现下拉框效果的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • javascript温习的一些笔记 基础常用知识小结

    javascript温习的一些笔记 基础常用知识小结

    在电脑上找到多年前的javascript的一些小笔记，因为要将笔记本上面的文件整理一下， 不用的删除掉， 所以将此篇笔记再发布一下，存档到自己的博客吧， 电脑上的文件就删除了
    2011-06-06

最新评论

关注微信公众号

扫一扫