• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The core of javascript
 

The core of javascript

on

  • 1,845 views

Introduce the core conceptions of javascript, including prototype chain, constructor, execution context, variable object, scope chain, closure and this.

Introduce the core conceptions of javascript, including prototype chain, constructor, execution context, variable object, scope chain, closure and this.

Statistics

Views

Total Views
1,845
Views on SlideShare
674
Embed Views
1,171

Actions

Likes
3
Downloads
14
Comments
0

6 Embeds 1,171

http://shangchun.net 1143
http://abtasty.com 19
http://cache.baidu.com 4
http://translate.googleusercontent.com 3
http://bj.scmt.dev.sankuai.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The core of javascript The core of javascript Presentation Transcript

    • Javascript 核心概念 尚春@meituan
    • Knowing why things work the way they work
    • but, not everything!
    • 讲什么?Prototype Chain Variable Object Constructor Closure Execution context This Scope Chain
    • {} name __proto__gender
    • [].hasOwnProperty(‘length’) [] length 0 __proto__Array prototype Object prototype concat fn hasOwnProperty fn ... ... ... ... __proto__ __proto__ null
    • instanceof [] __proto__ var arr = [];Array prototype assert(arr instanceof Array); concat fn // true ... ... __proto__ assert(arr instanceof Object); // trueObject prototypehasOwnProperty fn ... ... __proto__ null
    • 对象因何而来Constructor
    • 构造器制造过程F = new NativeObject()F.[[Class]] = "Function"F.[[Prototype]] = Function.prototypeF.[[Call]] = <reference to function>F.[[Construct]] = internalConstructor// if this function is created via new FunctionF.[[Scope]] = globalContext.scope// elseF.[[Scope]] = activeContext.scope;F.length = countParameters__objectPrototype = new Object();__objectPrototype.constructor = FF.prototype = __objectPrototypereturn F
    • 对象制造过程F.[[Construct]](initialParameters):O = new NativeObject();O.[[Class]] = "Object";var __objectPrototype = F.prototype;// if __objectPrototype is an objectO.[[Prototype]] = __objectPrototype// elseO.[[Prototype]] = Object.prototype;R = F.[[Call]](initialParameters); this === O;// if R is a objectreturn R// elsereturn O
    • function Engineer(name, gender) { this.name = name; this.gender = gender;}Engineer.prototype.print = function() { alert(this.name + this.gender);}var shangchun = new Engineer(‘尚春’, ‘male’);var lizhiye = new Engineer(‘李志业’, ‘male’);
    • Engineer other properties prototype shangchun __proto__ name 尚春 gender male__proto__ Engineer prototype Function.prototype constructor <built-ins> print fn __proto__ lizhiye __proto__ name 李志业 gender male__proto__ Object.prototype <built-ins> __proto__ null
    • 代码类型 eval code 10% global code 30%function code 60%
    • 每种代码类型都会运行在自己的上下文中 Execution Contexts
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1var res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };} Firstvar bar = foo(); Function ECbar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };} Secondvar bar = foo(); Function ECbar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };} Eval ECvar bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };} Thirdvar bar = foo(); Function ECbar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1 Global ECvar res = eval({ x: 1 });bar(); // 1
    • function foo() { var x = 1; return function () { alert(x); EC Stack };}var bar = foo();bar(); // 1var res = eval({ x: 1 });bar(); // 1
    • 详解EC Execution Context { vars,Variable Object function declarations, arguments... } [Variable object + all Scope Chain parent scopes] thisValue Context object
    • Variable Object// Global ECVariable Object === this === global object// Function ECVariable Object === Activation ObjectAO === Abstract VO + arguments object + formal parameters
    • Global VOvar bar = 10; Global VOfunction foo() { var x = 1; bar 10 return function () { foo fn alert(x); }; built-ins}
    • Activation Objectfunction foo(x, y) { AO var z = 30; // FD x 10 function bar() {} y 20 // FE (function baz() {})(); arguments {0:10, 1:20}} z 30foo(10, 20); bar fn
    • 代码执行过程1. 进入执行上下文 1.1. 初始化变量对象(Variable Object) 1.2. 初始化作用域链(Scope Chain) 1.3. 初始化this2. 执行代码
    • 初始化VO1. 若为Function EC,将函数各个形参名设为VO属 性,属性值为形参传值或undefined2. 将各个函数声明声明的函数名设为VO属性,其值为 对应的函数对象。重名则覆盖3. 将各个变量声明声明的变量设为VO属性,其值为 undefined。仅在与其它变量重名时可覆盖
    • function foo(x, y) { alert(x) // 1 var x = 10; alert(x) // 10 alert(y) // function function y() {};}foo(1, 2);
    • bar VO z 30 __parent__var x = 10; bar.[[Scope]](function foo() { var y = 20; foo VO y 20 (function bar() { __parent__ var z = 30; })(); Global VO})() x 10 other properties __parent__ null bar context scope chain
    • 关于作用域链1. 静态作用域(lexical scope)2. 在执行代码阶段可以被catch、with改变3. 为闭包的实现提供了基础
    • Closure函数是⼀一级对象 每个函数都是⼀一个闭包 作用域链
    • function foo() { var x = 10; return function () { alert(x); };}var x = 20;var returnedFunction = foo();returnedFunction(); 10
    • var x = 10;function foo() { alert(x);}(function(funArg) { var x = 20; var returnedFunction = funArg; returnedFunction();})(foo); 10
    • This1. Global EC: this === global object === global VO2. Function EC: 2.1. 作为函数调用时,this === global object 2.2. 作为方法调用时,this === caller object 2.3. 作为构造器调用时,this === new object 2.4. 通过call/apply调用时,this === first argument
    • 参考• The Core Dmitry Soshnikov• ECMA-262-3 in detail Dmitry Soshnikov• Annotated ECMAScript 5.1 es5.github.com
    • Thanks