脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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保持正确指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅析JavaScript中的array数组类型系统

    浅析JavaScript中的array数组类型系统

    除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧
    2016-07-07
  • 小程序中实现获取全部数据的图文教程

    小程序中实现获取全部数据的图文教程

    最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下
    2022-11-11
  • 简单实现js点击展开二级菜单功能

    简单实现js点击展开二级菜单功能

    这篇文章主要教大家简单实现js点击展开二级菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js如何将输入的文字部分获取拼音首字母

    js如何将输入的文字部分获取拼音首字母

    这篇文章主要介绍了js如何将输入的文字部分获取拼音首字母问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • javaScript中FormData使用方法示例

    javaScript中FormData使用方法示例

    这篇文章主要为大家介绍了javaScript中FormData使用方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • ie与ff下的event事件

    ie与ff下的event事件

    event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数的方式来模拟event，：（
    2009-09-09
  • 详解JavaScript中常用操作符的使用

    详解JavaScript中常用操作符的使用

    在 JavaScript 中，有一些操作符可以使代码更简洁、易读和高效。这篇文章为大家整理了11个JavaScript中常用操作符的使用，需要的可以参考一下
    2023-04-04
  • JS实现页面载入时随机显示图片效果

    JS实现页面载入时随机显示图片效果

    这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • uni-file-picker文件选择上传功能实现代码

    uni-file-picker文件选择上传功能实现代码

    本文介绍了uni-file-picker的基础使用方法,包括选择图片的九宫格样式、限制选择的图片数量、指定图片类型及后缀,以及如何自定义上传时机,详细说明了如何通过设置不同的属性来实现图片的选择和上传,适用于需要在应用中上传图片的开发者
    2024-09-09
  • ES6中的Promise代码详解

    ES6中的Promise代码详解

    本文通过实例代码给大家介绍了ES6中的Promise，感兴趣的朋友参考下吧
    2017-10-10

最新评论