一、问题由来:

var obj = {
foo: function () { console.log(this.bar) },
bar: 1
};
var foo = obj.foo;
var bar = 2;
// 写法一
obj.foo() //
// 写法二
foo() //

  上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果却不一样。

  这种差异的原因就在于函数体内部使用了this关键字。很多教科书会告诉你,this指的是函数运行时所在的环境。对于obj.foo()来说,foo运行在obj环境,所以this指向obj;对于foo()来说,foo运行在全局环境,所以this指向全局环境。所以,两者的运行结果不一样。

  那么为什么会这样?也就是说,函数的运行环境到底是怎么决定的?举例来说,为什么obj.foo()就是在obj环境执行,而一旦var foo = obj.foofoo()就变成在全局环境执行?

  本文就来解释 JavaScript 这样处理的原理。理解了这一点,你就会彻底理解this的作用。

二、内存的数据结构

  JavaScript之所以有this的设计,跟内存里的数据结构有关系。

var obj = { foo:  5 };

  上面的代码将一个对象赋值给变量obj。JavaScript引擎会现在内存里面生成一个对象 { foo: 5 },然后把这个对象的内存地址赋值给变量obj

  

  也就是说obj是一个地址。后面如果要读取 obj.foo,引擎先从obj拿到内存地址,然后从改地址读出原始对象,返回它的foo属性。

  原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo属性,实际上是以下面的形式保存的

  

{
foo: {
[[value]]: 5
[[writable]]: true
[[enumerable]]: true
[[configurable]]: true
}
}

  注意,foo属性的值保存在属性描述对象的value属性里面。

三、函数

  这样的结构是很清晰的,问题在于属性的值可能是一个函数。

var obj = { foo: function () {} };

  这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo属性的value属性。

  

{
foo: {
[[value]]: 函数的地址
...
}
}

  由于函数是一个单独的值,所以它可以在不同的环境(上下文)执行。

var f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()

四、环境变量

  JavaScript 允许在函数体内部,引用当前环境的其他变量

var f = function () {
console.log(x);
};

  上面代码中,函数体里面使用了变量x。该变量由运行环境提供。

  现在问题就来了,由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

var f = function () {
console.log(this.x);
}

  上面代码中,函数体里面的this.x就是指当前运行环境的x

var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 单独执行
f() //
// obj 环境执行
obj.f() //

  上面代码中,函数f在全局环境执行,this.x指向全局环境的x

  

  在obj环境执行,this.x指向obj.x

  

  回到本文开头提出的问题,obj.foo()是通过obj找到foo,所以就是在obj环境执行。一旦var foo = obj.foo,变量foo就直接指向函数本身,所以foo()就变成在全局环境执行。

五、应用场景

  作为对象方法调用

var test = {
a:0,
b:0
get:function(){
return this.a;
}
}

  作为函数调用

function makeNoSense(x) {
this.x = x;
}

  作为构造函数调用

function Point(x, y){
this.x = x;
this.y = y;
}

  声明在另外一个函数体内的函数,这种绑定到全局对象的方式会产生另外一个问题:this指向修改了,获取不到外部函数的环境变量,此时,可以使用替代方法

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

  或者使用箭头函数

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = (x) => {
this.x = x;
};
// 内部函数
var moveY = (y) => {
this.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

  在call、apply、bind中调用

 function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10])

  转载自:ruanyifeng.com/blog/2018/06/javascript-this.html

前端知识体系:JavaScript基础-作用域和闭包-this的原理以及几种使用场景的更多相关文章

  1. 前端知识体系:JavaScript基础-作用域和闭包-JavaScript的作用域和作用域链

    JavaScript的作用域和作用域链 作用域: 变量的作用域无非两种:全局作用域和局部作用域 全局作用域: 最外层函数定义的变量拥有全局作用域.即对任何内部函数来说都是可以访问的. <scri ...

  2. 前端知识体系:JavaScript基础-作用域和闭包-闭包的实现原理和作用以及堆栈溢出和内存泄漏原理和相应解决办法

    闭包的实现原理和作用 闭包: 有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方式就是,在一个函数中创建另一个函数. 闭包的作用: 访问函数内部变量.保持函数在环境中一直存在,不会被垃圾回收机 ...

  3. 前端知识体系:JavaScript基础-作用域和闭包-词法作用域和动态作用域

    词法作用域和动态作用域 1.作用域: 作用域是指程序代码中定义变量的区域 JavaScript采用词法作用域,也就是静态作用域 2.词法作用域和动态作用域 因为JavaScript采用的是词法作用域, ...

  4. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  9. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

随机推荐

  1. 【作业】Mental Rotation (模拟)

    题目链接:https://vjudge.net/contest/345791#problem/L [问题描述] Mental rotation is a difficult thing to mast ...

  2. 【转】那些年用过的Redis集群架构(含面试解析)

    引言 今天是2019年2月12号,也就是大年初八,我接到了高中同学刘有码面试失利的消息. 他面试的时候,身份是某知名公司的小码农一枚,却因为不懂自己生产上Redis是如何部署的,导致面试失败! 人间惨 ...

  3. SFTP客户端与服务端

    什么是 SFTP ? 在了解 SFTP 之前,我们先看看什么是 FTP . FTP( File Transfer Protocol )文件传输协议,是一种常用来在两终端系统之间传输文件的方法. SFT ...

  4. MySQL基础操作(二)

    MySQL基础操作 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.注意:使用视图时 ...

  5. linux 下搭建go开发环境

  6. Spring Boot配置文件的加载顺序

    配置文件的加载顺序, 后加载的会覆盖先加载的:也就是properties配置文件的内容会替换掉.yml及.yaml文件的内容

  7. 手动编译ts的经过

    动机 以前写ts或者es6,都是用在脚手架搭建的项目中,比如vue和react,当时当我识图写一个ts的demo的,我还要创建一个完整的vue或者react项目?明显不合适,那就要研究一下如何手动搭建 ...

  8. mouseover mouseleave

    mouseover在当鼠标移入元素或其子元素的时候都会触发,是一个重复触发,冒泡的过程.见下面例子,一个父元素包含一个子元素,在其父元素内滑动鼠标,超出子元素的范围时,也会触发事件. 而mouseen ...

  9. HTTP响应状态码整理

    1xx:信息 100 Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求.101 Switching Protocols服务器转换协议:服务器将遵从客 ...

  10. 使用async和await的异步编程

    异步编程模型(TAP)提供了抽象的异步代码.异步代码看起来和同步代码没什么大的区别,无非多个了两个关键字(async和await).但是代码的执行顺序并没看起来那么简单,代码的执行顺序根据cpu资源的 ...