JS中this的使用指南

lscho 发布于2019-08-22 16:42 / 3428人阅读

摘要：那么对于有返回值构造函数，如何指定呢而从上面，我们可以看出的是这种情况下，不再返回对象，而是返回语句的返回值。

首先来看两个例子

var user="lilei"
function fn(){
    console.log(user);
    console.log(this.user);
}
fn();
console.log(this.user);

输出结果

lilei
lilei
lilei

这个很好解释，user定义的是全局变量，fn调用的时候，相当于是window.fn(),而this就是指向调用它的对象，也就是window，所以第二个console输入的是lilei.而在最外层，this.user这里面的this其实是指向window的，所以也就相当于window.user，输出lilei。

node中输出

lilei
undefined
undefined

再看个例子

function fn(){
    var user="lilei"
    console.log(user);
    console.log(this.user);
}
fn();
console.log(this.user);

输出结果

lilei
undefined
undefined

这里面牵涉到局部变量和全局变量相同时，局部变量会覆盖全局变量。所以第一个自然是lilei。此时函数内部的this调用指向window，而在全局变量中并未定义user，所以报undefined。而第三个和第二个是一样的。

有一点需要明确的是，this在创建函数的内部是不知道到底指向谁，只有在调用的时候，方能决定！

var user="lihua"
function fn(){
    console.log(user);
    var user="lilei";
    console.log(this.user);
    this.user=123;
}
fn();
console.log(this.user);

输出结果

undefined
lihua
123

第一个之所以打印undefined，是因为代码处理分两个阶段，第一阶段是变量，函数声明，以及正常格式的参数创建，这是一个解析和进入上下文的阶段。第二个阶段是代码执行，函数表达式和不合格的标识符（为声明的变量）被创建。所以fn就相当于

function fn(){
    var user；
    console.log(user);
    user="lilei";
    console.log(this.user);
    this.user=123;
}

打印undefined是自然而然的事情。第二个打印lihua，没什么解释的。第三个是因为修改了this.user，所以会打印123。

也就是说，this指向的是最后调用他的对象。不过可以通过call，apply，bind来改变this的指向。

那么对于构造函数是如何指向的呢？

function Fn(){
    this.user = "lilei";
}
var a = new Fn();
console.log(a.user); //lilei

我们发现这个this指向a，之所以指向a是因为new操作符，改变了this的指向。
那么对于有返回值构造函数，this如何指定呢？

function Fn(){
    this.user = "lilei";
    return 1;
}
var a = new Fn();
console.log(a.user); //lilei

而

function Fn(){
    this.user = "lilei";
    return {user:"lihua"};
}
var a = new Fn();
console.log(a.user); //lihua

从上面，我们可以看出

return的是Object 这种情况下，不再返回this对象，而是返回return语句的返回值。a.user的时候那么调用的{user:lihua}的值。

这种情况我们可以这样理解

function Fn(){
    this.user = "lilei";
    return 1;
}
var a = new Fn();
等价于
function Fn(){}
var a = new Object();
a.__proto__ = Fn.prototype;
Fn.call(a)

而

function Fn(){
    this.user = "lilei";
    return {user:"lihua"};
}
var a = new Fn();

等价于

function Fn(){}
var a = new Object();
a.__proto__ =  {user:"lihua"}.prototype;
{user:"lihua"}.call(a)

如果return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。这种情况下，忽视return值，依然返回this对象。

云服务器 GPU云服务器 js里面的this java中this javascript中this详解 js中使用数组

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

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

should.js源码分析与学习

摘要：结构其中为整个项目入口，为中的类，负责对测试信息进行记录。通过抛出错误而不是返回布尔值的方式来通知用户，能够更加明显的通知用户，也方便向上抛出异常进行传递。背景为了研究与学习某些测试框架的工作原理，同时也为了完成培训中实现一个简单的测试框架的原因，我对should.js的代码进行了学习与分析，现在与大家来进行交流下。目录 ext assertion.js assertion-e...

Turbo 2019-08-21 13:33 评论0 收藏0
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表

摘要：但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表。这篇文章中，我会教你如何自定义选项来制作很酷的图表。我们使用来作为的打包器。代码中，使用了一些实例数据和可选参数传递给的数据对象，并且设置，使得图表会充满外层容器。 showImg(https://segmentfault.com/img/remote/1460000009049816?w=1000&h=424); 本文...

刘厚水 2019-08-20 15:45 评论0 收藏0
一步一步开发安卓下的react-native应用系列之进阶篇

摘要：首先我们打开命令行，切换到项目根目录下，输入安装完成后，请注意，需要把目录下的所有字体文件拷贝到目录下，如果没有该目录，请自行创建。看过我前面文章的朋友们现在应该能正常运行自己的第一个RN应用了，那都是小儿科，现在我们来做点进阶一点的东西。这篇文章有一些属于干货性的东西，请仔细阅读。特别需要注意我加粗的部分。首先我们来看下js文件结构，在项目初始化成功...

xioqua 2019-06-26 17:14 评论0 收藏0
用100行代码，完成自己的前端构建工具！

摘要：行代码，你将拥有一个现代化规范测试驱动高延展性的前端构建工具。在阅读前，给大家一个小悬念什么是链式操作中间件机制如何读取构建文件树如何实现批量模板渲染代码转译如何实现中间件间数据共享。函数将参数中的挂载到上，并返回以便于链式操作即可。 ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建...

haitiancoder 2019-08-26 13:54 评论0 收藏0
js 中的 call apply ，试在vue中的使用

摘要：先引用一句基本都会引用的句子，但本次并不是介绍两个方法的区别，而是尝试在中进行使用。二应用在中在实例中的中定义了一个变量，在中打印出来同时调用中的方法。测试在中直接使用实践证明也是可以打印出来的。注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。先引用一句基本都会...

why_rookie 2019-08-23 18:02 评论0 收藏0
深入 Parcel--架构与流程篇

摘要：本篇文章是对的源码解析，代码基本架构与执行流程，带你了解打包工具的内部原理，在这之前你如果对不熟悉可以先到官网了解介绍下面是偷懒从官网抄下来的介绍极速零配置应用打包工具极速打包使用进程去启用多核编译。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是对 Parce 的源码解析，代码基本架构与执行流程，带你...

yuxue 2019-08-23 16:00 评论0 收藏0