this以及执行上下文概念的重新认识
在理解this的绑定过程之前,必须要先明白调用位置,调用位置指的是函数在代码中被调用的位置,而不是声明所在的位置。
(ES6的箭头函数不在该范围内,它的this在声明时已经绑定了,而不是取决于调用时。所以导致它没有arguments,不能做构造函数,更不能new,bind,call也不能改变它的this)
而很多情况下调用位置往往是隐式的,所以我们在函数调用位置就要明确它的调用栈。
function baz() {
// 当前调用栈是:baz
// 因此,当前调用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar 的调用位置
}
function bar() { 82
// 当前调用栈是 baz -> bar
// 因此,当前调用位置在 baz 中
console.log( "bar" );
foo(); // <-- foo 的调用位置
}
function foo() {
// 当前调用栈是 baz -> bar -> foo // 因此,当前调用位置在 bar 中
console.log( "foo" );
}
baz(); // <-- baz 的调用位置
这里你可以把调用栈理解成函数调用链。
默认绑定:指的是window调用函数
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
在严格模式下
function foo() {
"use strict";
console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined
结果是完全不同的,我们在严格模式那一章讲到过。function foo() { console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。
总结:常见的误解是:把this看成指向函数本身或者函数的作用域。如文章开头提到的,它并不是在编写时绑定的,
它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。
原文经典名句:当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this 就是这个记 录的一个属性,会在函数执行的过程中用到。
具体的this解析例子这里就不多提了,可以翻一下我以前写的关于this例题的一篇。
写这篇笔记最主要就是想记下上面的那句名句而已,让人耳目一新。
this以及执行上下文概念的重新认识的更多相关文章
- JS 执行上下文
先看个小例子 function fn(){ console.log(a);//undefined; var a = 1; } fn(); 为什么打印出来的是 undefined 呢? 执行上下文概念 ...
- JavaScript学习系列之执行上下文与变量对象篇
一个热爱技术的菜鸟...用点滴的积累铸就明日的达人 正文 在上一篇文章中讲解了JavaScript内存模型,其中有提到执行上下文与变量对象的概念.对于JavaScript开发者来说,理解执行上下文与变 ...
- JS 执行上下文的一次理解
执行上下文 执行上下文概念 当代码运行时,会产生一个对应的执行环境,在这个环境中,变量会被事先提出来(变量提升),代码从上往下开始执行,就叫做执行上下文. 注:在定义变量是未直接赋值,使用默认值 un ...
- 深入理解JavaScript执行上下文、函数堆栈、提升的概念
本文内容主要转载自以下两位作者的文章,如有侵权请联系我删除: https://feclub.cn/post/content/ec_ecs_hosting http://blog.csdn.net/hi ...
- JavaScript的执行过程(深入执行上下文、GO、AO、VO和VE等概念)
JavaScript的执行过程 前言 编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行.那么在解析阶段JS引擎又会进行哪些操 ...
- javascript 执行上下文的理解
首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...
- Javascript本质第二篇:执行上下文
在上一篇文章<Javascript本质第一篇:核心概念>中,对Javascript执行上下文做了解释,但是这些都是基于Javascript标准中对执行上下文的定义,也就是说理论上的东西,本 ...
- SQL Server安全(6/11):执行上下文与代码签名(Execution Context and Code Signing)
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
- 进阶学习js中的执行上下文
在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...
随机推荐
- Java基本语法_循环练习系列(一)——模拟双色球
目前正在自学java中,学完循环这一块,简单写几个例子,使之更加熟练掌握循环语句和条件语句. 简述一下要这段代码要完成的任务: /*有33个红色球,16个蓝色球. 在33个里选6个 ,16个里选1个. ...
- JavaScript高级程序设计--对象创建的三种方法
创建对象的三种方法: 1.工厂模式 工厂模式是软件工程领域广为人知的设计模式,这种模式抽象了创建具体对象的过程.下面是使用工厂函数创建对象的的一个例子. 2.构造函数: 从上面的例子中,我们看到构造函 ...
- React.js 小书 Lesson5 - React.js 基本环境安装
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson5 转载请注明出处,保留原文链接和作者信息. 安装 React.js React.js 单独使 ...
- Devexpress Xtrareport 并排报表
什么是并排报表呢? 按照我个人理解:并排报表是把两张或者两张以上的报表,放在一个报表页面. 注:为了方便,本示例使用同一个数据源,但是您可以使用相同的方法,而在一个报表文档中显示两个完全不同的 (使用 ...
- UITableView分隔线
问题1: 在ios中使用UITableView时,当行数较少是,可能一屏幕能显示完全所有行,这时候会出现下面的问题,显示多余的分隔线 图如下: 解决方案: //解决方案1 //添加如下代码 -(CGF ...
- html 01前沿-web介绍
1. 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 2. 浏览器(显示代码) 浏览器是网页显示.运行的平台,常用的浏览器有IE.火 ...
- sass文件转css时注释虽然支持中文,但是出现乱码的解决方法
sass文件转css时注释虽然支持中文,但是出现乱码的解决方法 Scss 注释中文报错问题(windows系统, 已解决)找到ruby的安装目录,里面也有sass模块,类似这样样的路径:F:\Prog ...
- Struts2_HelloWorld1
打开 eclipse,新建 web 项目. 因为可能需要 jstl 表达式,所以添加 jstl需要的jar包. 下载链接:http://pan.baidu.com/s/1hr6mBI0 将jar拷贝至 ...
- oracle中文乱码问题
1.查看服务器端编码select userenv('language') from dual;我实际查到的结果为:AMERICAN_AMERICA.ZHS16GBK 2.执行语句 select * f ...
- CRUD全栈式编程架构之导入导出的设计
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...