js中this的四种使用场景

lk20150415 发布于2019-08-20 19:08 / 2622人阅读

摘要：最近读到了一篇介绍中的四种使用场景的文章，感觉总结的很好，所以我认真读了读，并且动手实践了其中的，与大家共享。

最近读到了一篇介绍js中this的四种使用场景的文章，感觉总结的很好，所以我认真读了读，并且动手实践了其中的demo，与大家共享。原文链接：
https://github.com/alsotang/n...
遇到this，一直要记得这句：函数执行时，this总是指向调用该函数的对象（即：判断this所在的函数属于谁）。

1、函数有所属对象，则指向所属对象

var myObject={
    value:100
};
myObject.getValue=function(){
    console.log(this.value);
    console.log(this);
    return this.value;
}
console.log(myObject.getValue());

这里的getValue属于对象myObject，所以this就指向myObject，执行结果如下：

2、函数没有所属对象时，就指向全局对象（window或global）

var myObject={
    value:100
};
myObject.getValue=function(){
    var foo=function(){
        console.log(this.value);
        console.log(this);
    }
    foo();
    return this.value;
}
console.log(myObject.getValue());

在这里，foo属于全局对象，所以foo函数打印的this.value为undefined。

写到这里，我又想起setTimeout和setInterval方法也是属于全局对象的，所以在这两个函数体内this是指向全局的，所以也是这种情况，如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    setTimeout(function(){
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

执行结果如下：

所以，如果要得到想要的结果，就要这样写了吧：

myObject.getValue=function(){
    let self=this;//用一个self保存当前的实例对象，即myObject
    setTimeout(function(){
        console.log(self.value);
        console.log(self);
    },0);
    return this.value;
}
console.log(myObject.getValue());

结果如下：

这又让我想起来了es6中箭头函数的妙用了（这个this绑定的是定义时所在的作用域，而不是运行时所在的作用域；箭头函数其实没有自己的this，所以箭头函数内部的this就是外部的this）（可详看es6教程：http://es6.ruanyifeng.com/#do...箭头函数），如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    // let self=this;//因为用了箭头函数，所以这句不需要了
    setTimeout(()=>{
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

执行结果同上：

3、使用构造器new一个对象时，this就指向新对象：

var oneObject=function(){
    this.value=100;
};
var myObj=new oneObject();
console.log(myObj.value);

这里的this就指向了new出来的新对象myObj，执行结果如下：

4、apply，call，bind改变了this的指向

var myObject={
    value:100
}
var foo=function(){
    console.log(this);
    console.log(this.value);
    console.log("...............");
}
foo();
foo.apply(myObject);
foo.call(myObject);
var newFoo=foo.bind(myObject);
newFoo();

foo本来指向全局对象window，但是call，apply和bind将this绑定到了myObject上，所以，foo里面的this就指向了myObject。执行代码如下：

GPU云服务器云服务器 java中线程的四种状态 activity的四种状态数据迁移的四种方法对数据仓库分析的四种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85209.html

Vue.js应用的四种AJAX请求数据模式

摘要：应用的四种请求数据模式翻译原文出处鄙人翻译略差，别见笑。每个都有自己的利弊，应根据要求进行判断。二组件在使用框架时，组件负责管理自己的请求和独立状态。相反，将初始应用程序状态注入页面的内联脚本中，以便应用程序作为全局变量在需要时可用。 Vue.js应用的四种AJAX请求数据模式翻译原文出处：4 AJAX Patterns For Vue.js Apps 鄙人翻译略差，别见笑。如果...

iKcamp 2019-08-20 19:00 评论0 收藏0
[摘译]js内存泄漏常见的四种情况

摘要：本文主要选取了这篇文章中的一小部分来说明一下中产生内存泄漏的常见情况对于较难理解的第四种情况参考了一些文章来进行说明意外的全局变量中如果不用声明变量该变量将被视为对象全局对象的属性也就是全局变量上面的函数等价于所以你调用完了函数以后变量仍然本文主要选取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 这...

Moxmi 2019-08-19 18:04 评论0 收藏0
MyBatis 中 @Param 注解的四种使用场景，最后一种经常被人忽略！

摘要：如果我们在动态中用到了参数作为判断条件，那么也是一定要加注解的，例如如下方法定义出来的如下这种情况，即使只有一个参数，也需要添加注解，而这种情况却经常被人忽略好了，不知道大家有没有到呢有问题欢迎留言讨论。有一些小伙伴觉得 MyBatis 只有方法中存在多个参数的时候，才需要添加 @Param 注解，其实这个理解是不准确的。即使 MyBatis 方法只有一个参数，也可能会用到 @Par...

BothEyes1993 2019-08-16 18:40 评论0 收藏0
JavaScript创建对象的四种方式

摘要：这种方式和有异曲同工之处，因为是对象的构造函数，它的原型对象也是的方式四这种方式叫做使用对象字面量创建对象，这是最简单的一种方式，也是我经常使用的方法，目的是在于简化创建包含大量属性的对象的过程。关键字 Object.create; new Object(); new Fn(); {} 背景此段可跳过不读……在平时的使用中，创建对象最常用的方式是使用{}直接创建，里面直接写方法和属...

2450184176 2019-08-22 18:32 评论0 收藏0
react关于事件绑定this的四种方式

摘要：在组件中，每个方法的上下文都会指向该组件的实例，即自动绑定为当前组件而且还会对这种引用进行缓存，以达到和内存的最大化。在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件,而且react还会对这种引用进行缓存，以达到cpu和内存的最大化。在使用了es6 class或者纯函数时，这种自动绑定就不复存在了，我们需要手动实现this的绑定以下是几种绑定的方...

张利勇 2019-08-22 15:12 评论0 收藏0