上下文 | 易学教程

【前端知识体系】CSS布局知识强化

阅读更多关于【前端知识体系】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局（兼容性的问题） 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background-color: #48adff; } .layout.float .main { background-color: #ff4344; } </style> <article class="left-main"> <div class="left"></div> <div class="main"> <h1>浮动两栏布局</h1> <p>两栏布局的中间部分</p> <p>两栏布局的中间部分</p> </div> </article> </section>  <section class="layout absolute">

js执行上下文 this指向的理解

阅读更多关于 js执行上下文 this指向的理解

this 是很多人会混淆的概念，但是其实它一点都不难，只是网上很多文章把简单的东西说复杂了。在这一小节中，你一定会彻底明白 this 这个概念的。 this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉）例子1：按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。看到a可以通过window点出来，说明this指向的是window 例子：这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。其实例子1和例子2说的并不够准确，下面这个例子就可以推翻上面的理论。如果要彻底的搞懂this必须看接下来的几个例子这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话

JavaScript漫谈之执行上下文与this

阅读更多关于 JavaScript漫谈之执行上下文与this

this ，即当前执行代码的环境对象。换句话说，执行的每个 JavaScript 函数都有对其当前执行上下文的引用，称为 this 。一、执行上下文执行上下文代表函数的调用方式，大多数情况下，函数的调用方式决定了 this 的值。即，执行上下文决定了 this 的值。要理解这个关键字 this ，只需要 this 取决于函数的调用方式，跟函数声明以及声明位置没关系。比如看下面这段代码： function person ( ) { console . log ( this . name ) ; } let name = "sueRimn" ; let one = { name : "八至" , age : 22 } ; let two = { name : "小九" , age : 22 } ; person ( ) ; // "sueRimn" one . person ( ) ; // "八至" two . person ( ) ; // "小九" 代码中函数 person() 的执行任务是打印出 this.name ，即打印当前执行上下文的 name 属性的值。当函数 person() 没有被调用时，执行上下文也没有指定，默认为当前全局下， this.name 就是全局变量的值 "sueRimn" 。而 one.person() 是代表函数 person()

javascript 通过执行上下文来跟踪代码

阅读更多关于 javascript 通过执行上下文来跟踪代码

在javascript中，代码执行的基础单元是函数。我们时刻使用函数，使用函数进行计算，使用函数更新UI,使用函数达到复用代码的目的，使用函数让我们的代码更容易理解。为了达到这个目标，第一个函数可以嗲用第二个函数，第二个函数可以调用第三个函数，以此类推。当发生函数调用时，程序会回到函数调用的位置。 JavaScript引擎是如何跟踪函数的执行并回到函数的位置的？ JavaScript代码有两种类型：一种是全局代码，在所有函数外部定义；一种是函数代码，位于函数内部。JavaScript引擎执行代码时，每一条语句都处于特定的执行上下文中。既然具有两种类型的代码，那么就有两种执行上下文：全局执行上下文和函数执行上下文。二者最重要的差别时：全局执行上下文只有一个，当JavaScript程序开始执行时就已经创建了全局上下文；而函数执行上下文是在每次调用函数时，就会创建一个新的。注意：当调用函数时可通过关键字访问函数上下文。函数执行上下文，虽然也称为上下文，但完全是不一样的概念。执行上下文是内部JavaScript概念，JavaScript引擎使用执行上下文来跟踪函数的执行。 JavaScript基于单线程的执行模型：在某个特定的时刻只能执行特定的代码。一旦发生函数调用，当前的执行上下文必须停止执行，并创建新的函数执行上下文来执行函数。当函数执行完成后，将函数执行上下文销毁

说说JS的执行上下文

阅读更多关于说说JS的执行上下文

先推荐几篇微信文章链接，有兴趣的小伙伴可以看看。 1、内存空间详细图解 http://mp.weixin.qq.com/s/NGqdjhoU3MR9LD0yH6tKIw 2、执行上下文详细图解 http://mp.weixin.qq.com/s/hRE3HzeSxxok1bLI8vH1yw 3、变量对象详解 http://mp.weixin.qq.com/s/LijjPErxcFB4pN_wUo2cnw 4、作用域链与闭包 https://mp.weixin.qq.com/s/taddUMUOcPgAriW6xZWFcA 5、全方位解读this http://mp.weixin.qq.com/s/rlFJAiD1YWb065juEe4sNg 6、this的值到底是什么？一次说清楚 http://mp.weixin.qq.com/s/ksqtCd8ouxU-cVc_HnA4Aw 1、内存空间内存空间大家都比较熟，即栈与堆。 JS的基础数据类型有Undefined、Null、Boolean、Number、String，这些都是按值访问，存放在栈内存。其他的Object为引用类型，如数组Array或其他的自定义对象，这些存放在堆内存，其对应的地址引用（指针）放在栈内存。大家对这些应该比较熟，就不赘述了。 2、JS代码的执行环境（执行上下文，Execution Context

JS-执行上下文与执行上下文栈

阅读更多关于 JS-执行上下文与执行上下文栈

执行上下文与执行上下文栈 1.变量声明提升与函数声明提升 1）变量声明提升：使用var声明的变量，在定义语句之前就可以访问到，它的值为undefined。 2）函数声明提升：通过function（）声明的函数，在执行之前就可以访问到，它的值为函数定义（对象） —>两者执行顺序：先执行变量提升，再执行函数提升。一道例题： var a = 3 ; function fn ( ) { console . log ( a ) var a = 4 } fn ( ) //a输出 undefined /* * 上面函数体实质上等同于 * function fn（）{ * var a * console.log(a) * a=4 * } * 因为函数提升，所以在执行之前就可以访问到，而且由于变量声明提升，所以console.log（a）的值为undefined */ 2.执行上下文 1）代码分类 *全局代码 *函数（局部）代码 2）全局执行上下文 ①在执行全局代码之前将window确定为全局执行上下文 ②对全局数据进行预处理： *var定义的全局变量---->undefined，添加为window的属性。 *function声明的全局函数---->赋值（fun），添加为window的方法。 *this---->赋值（window） ③开始执行全局代码 3）函数执行上下文 ①在调用函数

js执行上下文

阅读更多关于 js执行上下文

js预编译阶段 js代码在经过语法分析的阶段后会进入预编译阶段. 预编译发生在函数执行的前一刻，过程如下：创建AO对象，执行期上下文，执行上下文是js代码在被解析执行时所在环境的抽象概念。寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined. 将形参和实参相统一，即更改形参后的undefined为具体的形参值。寻找函数中的函数声明，将函数名作为AO属性名，值为函数体。至此，预编译环节结束，函数中变量按照最终AO对象中的值开始执行。执行上下文由于js运行环境主要有三种：全局环境函数环境 eval(不建议使用，会有安全、性能问题) 每次进入一个运行环境是都会创建一个相应的执行上下文，所以执行上下文分三种： 1.全局执行上下文 2.函数执行上下文 3.eval函数执行上下文执行上下文分为两个阶段：执行上下文的创建与执行创建执行期上下文时，主要做了下面的这些事情： 1.确定this指向 2.词法环境创建 3.变量环境的创建执行栈具有栈的后进先出（LIFO）的特性用于存储代码执行时产生的执行上下文首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。根据执行栈LIFO规则

JavaScript：执行上下文&&执行上下文栈

阅读更多关于 JavaScript：执行上下文&&执行上下文栈

在JavaScript概念中，有一个概念比较难以理解，它就是执行上下文和执行栈。最近在网上查阅了很多资料，现在把我的一些理解写出来，希望对各位有些帮助。一、执行上下文什么是执行上下文？是不是我们平时写文章的时候的那个上下文关系？答案是否定的，在JavaScript中的执行上下文指的是JS代码被解析和运行时所处的环境，被称之为JavaScript中的执行上下文，换句话来说，我们在实际开发中写的所有JavaScript代码都会在执行上下文中运行。有的人就会想到了，既然执行上下文是一个环境，肯定有不同的环境类型了。答案是肯定的，通常会将JavaScript中的执行上下文分为以下三种类型：全局执行上下文、函数执行上下文、Eval函数执行上下文。全局执行上下文这个在JavaScript中式默认以及最基本的执行上下文，它的范围很大，类似于全局作用域一样，当目标代码不在任何函数中的时候，它就位于全局执行上下文中，处于全局执行上下文中的代码做了两件事儿： 1>创建一个全局对象，例如浏览器中的全局对象就是window对象； 2>将this指向这个全局对象，而且需要注意的是：一个程序代码中只存在有且只有一个全局执行上下文；函数执行上下文函数执行上下文，顾名思义，就是处于函数体内的代码解析及运行的环境，当每次调用函数的时候，都会给该函数创建一个函数执行上下文

JS(this和执行上下文)

阅读更多关于 JS(this和执行上下文)

Javascript中this关键字通常指向当前函数的拥有者。在javascript中通常把这个拥有者叫做执行上下文。函数的执行上下文由当前的运行环境而定： 1. 全局变量和全局函数附属于全局对象(window)，因此使用”var”或”this”两种方法定义全局变量是等效的。 2. 执行上下文和作用域不同。执行上下文在运行时确定，随时可能改变，而作用域则在定义时确定，永远不会变。 3. 如果当前执行的是一个对象的方法，则执行上下文就是这个方法所附属的对象。 4. 如果当前是一个创建对象的过程或者执行一个对象的方法，则执行上下文就是这个正在被创建的对象。 5. 如果一个方法在执行时没有明确指定附属对象，则这个方法的上下文为全局对象。 6. 使用call和apply可以改变对象的执行上下文。看下面的例子： var v1 = "global variable"; //全局变量附属于对象 //this.v1 = "global variable with this"; //全局变量定义时使用var v1和this.v1两种方法等效。 function func1(){ var v1 = "part variable"; writeHtml(v1); writeHtml(this.v1); } func1(); //part variable //global variable

深入理解JavaScript执行上下文

阅读更多关于深入理解JavaScript执行上下文

在《深入理解JavaScript执行上下文栈》这篇文章中，我们已经介绍了执行上下文相关概念：执行上下文分类：全局上下文、函数上下文全局上下文：执行全局代码时，创建全局上下文。函数上下文：执行函数时，创建函数上下文。主要属性：变量对象（Variable object，VO）作用域链（Scope chain） this 这一篇我们将介绍执行上下文的具体处理过程。示例我们来看一个经常在面试中被问到的问题： var scope = 'global scope' function checkscope () { var scope = 'local scope' function f () { return scope } return f() } checkscope() var scope = 'global scope' function checkscope () { var scope = 'local scope' function f () { return scope } return f } checkscope()() 我们发现这两段代码最后输出的都是’local scope’，那么这两段代码有什么不同呢？具体分析我们结合前面所学的执行上下文栈、变量对象、作用域链相关知识来分析一下这两段代码的执行过程。首先我们先来看第一段代码： var

订阅上下文