JS技术

JavaScript 引擎技术 PowerPoint Presentation

字号+ 作者:H5之家 来源:H5之家 2015-09-11 13:08 我要评论( )

JavaScript 引擎技术. JavaScript 语言与引擎技术 JavaScript 语言规范的发展 JavaScript 引擎的发展 JavaScript 的扩展. 主讲:周爱民. JavaScript 的语言特性

Javascript

JavaScript 引擎技术

  • JavaScript语言与引擎技术

  • JavaScript语言规范的发展

  • JavaScript引擎的发展

  • JavaScript的扩展

  • 主讲:周爱民

    Javascript1

    JavaScript的语言特性

  • 过程式是入门特性

  • 原型继承是对象框架特性

  • 函数式是其语言的根基

  • 动态特性是粘合与催化剂

  • Javascript

    程序设计语言的分类

    Javascript2

    动态语言

    函数式

    JavaScript语言的知识系统

    难度

    动态

    原型继承

    面向对象

    静态

    过程式

    跨度

    命令式

    说明式

    Javascript

    接下来的目标

  • JavaScript语言的原子特性

  • 值与引用

  • 闭包与作用域(函数、函数实例、函数闭包)

  • 引擎如何实现这些特性

  • 搞清以下问题

  • 原型继承是怎么回事

  • 函数闭包的怎么回事

  • 动态语言的怎么回事

  • 融合:JavaScript引擎是如何做到的?

  • Javascript

    一般内置关键字

  • var

  • 无初值变量:var x

  • 变量初值:var x = 100

  • 局部变量与全局变量:x = 100

  • typeof

  • 六种类型:“number”、“string”、“boolean” 、 "undefined" 、"object"和"function" 。

  • delete

  • void

  • undefined与空

  • undefined是一种类型;null是一个对象。

  • null是关键字;undefined不是关键字(高版本中是一个全局成员)

  • null对象没有方法。

  • null == undefined == false

  • null !== undefined !== false

  • Javascript

    流程控制

  • 条件:if (*expression) ... else ...

  • 循环:for (*from,*to,*step) ...

  • 循环:while() {...}; do {...} while (*expression);

  • 过程:function *name(*params) {...}

  • 分支:

    switch (*expression) {

    case *value : ...;

    case *value : ...;

    default:...;

    }

  • 中断:break *lable;

  • 继续:continue *lable;

  • 返回:return *result;

  • Javascript

    异常处理

  • 异常对象创建

    *exception = new Error(*number, *description)

  • 异常触发语法

    throw *exception

  • 异常捕获语法

    try{

    // tryStatements

    }

    catch (*exception) {

    // catchStatements

    if (*exception.number == 10) {

    // ...

    }

    else throw *exception;

    }

    finally {

    // finallyStatements

    }

  • 异常(对象)记录:name, number与description

  • 异常的种类:运行时错误、语法错误

  • Javascript

    元类型系统与对象类型系统

  • 产生一个新的实例

  • 直接定义(基础类型)

  • obj = new MyObject()

  • 赋值与引用

  • 基础类型使用值运算:Number、Boolean和String

  • 对象类型:引用

  • Javascript

    Number

    number

    包装类

    Boolean

    boolean

    String

    string

    直接量

    Object

    构造器

    值类型

    Function

    内置对象

    Array

    原生对象

    类型系统typeof( )

    undefined

    RegExp

    Error

    Date

    引用类型

    注1

    Math

    Object(object)

    Function(function)

    注2

    Global

    注2

    Arguments

    注3

    Enumerator

    XML

    引擎扩展对象

    VBArray

    Script

    ActiveXObject

    ...

    注1

    Debug

    宿主对象

    Window

    Image

    Navigator

    ...

    类型系统与对象系统

    注1:非构造器

    注2:不能直接引用

    注3:指引擎相对于ECMA扩展的原生对象(左右两侧分别为JScript与SpiderMonkey JS)

    Javascript

    面向对象的基本概念

  • 对象:一个有继承关系的记录

  • 封装(域-访问权限):可见性(编译实现与语法解释)

  • 私有(private)、保护(protected)、公开(public)……

  • 继承性

  • 多态问题

  • 面向对象的基本设计模型:PME

  • 字段(成员)与属性:field,Property(get/set)

  • 方法:Method

  • 类方法、对象方法、类静态方法……

  • 事件与消息:Event,message

  • 闭包

    原型

    Javascript

    JavaScript面向对象的支持

  • 成员列举(反射):for .. in

  • 成员存取:[ ], .

  • 成员检查:in关键字(运算)

  • with关键字:打开对象闭包

  • this关键字:方法调用时的实例引用

  • 继承检查:instanceof关键字(运算)

  • 对象构造:new关键字(运算)

  • Javascript

    原型问题

  • JavaScript使用原型来实现继承。

  • 原型定义:

    function MyObject() {...}

    function MyObject2() {

    // (类抄写)...

    }

    MyObject2.prototype = new MyObject();

    MyObject2.prototype.XXX = ...; // 原型修改

  • 原型:对象构造时使用的基本模板。obj = new MyObject2();// 等效于this = new MyObject2._proto_.constructor();obj = MyObject2.apply(this);

  • Javascript

    对象系统的类型问题

  • JavaScript没有严格的类类型

  • isPrototypeOf与instanceof的实现

  • result = object instanceof class

  • object1.isPrototypeOf(object2)

  • if (object instanceof class) { result = class.prototype.isPrototypeOf(object)} // << result is true!

  • 类型识别的基础:构造器(函数)引用

  • Javascript

    对象是什么?

  • 数组的两种实现方案

  • 对象=关联数组=属性包=存储体

  • 对象只有成员访问操作

  • Javascript

    性质

    foo

    ...

    R/D/E

    O2.parent

    性质

    foo

    ...

    R/D/E

    O3.parent

    性质

    obj._proto_

    aObj

    性质

    原型/对象-属性包

    function Object2() {

    }

    function Object3() {

    }

    Object.prototype

    // Object2.prototype = new Object();

    Object3.prototype = new Object2();

    Object2.prototype

    Object3.prototype

    Object.prototype.foo = ...;

    aObj = new Object3();

    aObj.foo()

    Object2.prototype.foo = ...;

    aObj.foo()

    Javascript

    主要函数式特性

  • 可变参数以及使用值参数传递

  • 无副作用

  • 非惰性求值

  • 副作用带来的影响:function() { ... }(x=y);

  • 函数是一个值(引用类型的数据)

  • 表达式运算元:f(f++);

  • 可访问调用栈

  • 函数闭包与对象闭包

  • Javascript

    函数引用

    变量1

    变量2

    ...

    变量1

    变量2

    ...

    ...

    ...

    00040000 : mov eax, 100

    // 位于运行空间的二进制代码...

    function myFunc() {

    // ...

    }

    ..

    ..

    函数实例

    运行期

    代码、编译期

    function myFunc() {

    // ...

    }

    function myFunc() {

    // ...

    }

    函数

    变量1

    变量2

    ...

    ...

    ...

    运行期函数实例至少

    有一个闭包,这时候

    “函数实例 = 闭包”

    function myFunc() {

    // ...

    }

    ..

    ..

    function ....

    函数实例具有多

    个闭包的情况

    function myFunc() {

    // ...

    }

    函数、函数实例、函数引用与闭包

    闭包

    Javascript

    第二次

    do Check: test.

    do myFunc: undefined

    当前闭包中的值

    上一个闭包中的值

    一个实例多个闭包的例子

    第一次

    var checker;

    function myFunc() {

    if (checker) {

    checker();

    }

    alert('do myFunc: ' + str);

    var str = 'test.';

    if (!checker) {

    checker = function() {

    alert('do Check:' + str);

    }

    }

    return arguments.callee;

    }

    // 连续执行两次myFunc()

    myFunc()();

    do myFunc: undefined

    导致一个闭包被持用

    返回同一个实例的引用

    第二个调用运算

    导致闭包创建

    Javascript

    闭包是什么?

  • 闭包与作用域

  • 闭包带来的作用域仅有两个:闭包内与闭包外

  • Javascript

    闭包是什么?

  • 与内部执行体相关的结构

  • Javascript

    闭包内部结构上的存取规则

    Javascript

    ?

    性质

    foo

    ...

    R/D/E

    Object.prototype

    脚本对象 . 变量/函数?

    性质

    foo

    ...

    R/D/E

    O2.parent

    upvalue

    脚本对象 . 变量/函数?

    性质

    Object2.prototype

    O3.parent

    upvalue

    Object3.prototype

    脚本对象 . 变量/函数?

    obj._proto_

    context.body

    aObj

    aFunc

    存取规则的简单描述

    Javascript

    主要动态语言特性

  • 重写

  • 引擎对重写的完全支持:完全动态绑定

  • 宿主的限制

  • 宿主对象系统的限制

  • 动态执行系统

  • 动态类型系统

  • 类型转换:valueOf(), toString()

  • 包装类(装箱与拆箱)

  • 对象与数组的动态含义

  • 表的散列与顺序访问

  • Javascript

    引擎的基本原理与模型

  • 语法分析

  • 动态执行

  • Javascript

    脚本对象

    全局

    脚本对象

    anonymous

    打开一个闭包

    ()

    ( )

    yes, prop

    过程:

    *anonymous

    .

    ( )

    P,I

    obj

    ‘aMethod’

    a

    =

    P,I,C, rt

    一次在对象及原型

    属性包中的扫描

    x

    100

    no, undef.

    JavaScript怎样粘合语言特性

    function a() {

    }

    (function() {

    var x;

    obj.aMethod( a(x = 100) );

    })();

    no, next, yeah! a

    yes, x

    undef.

    a

    100

    x

    Javascript

    lambda?函数式?

    ((. obj 'aMethod') ((a (= x 100))))

    lambda = 函数

    动态?

    函数式语言,其实不如说成是表达式语言!

    什么是动态函数式语言?

    lambda表达式运算是求值运算!

    所以我们可以在一个语法树(或其子树)上执行它,其结果仍然是值!

    我们把对象存取变成了原型链表上的名称查找!

    我们闭包/作用域变成了“脚本对象(结构)”上的名称查找!

    动态语言= “在关联数组上的、动态的查找(标识符)”,取得它/执行它!

    语言= 数据结构+算法!

    Javascript

    十分钟:休息,答疑

    下一节的内容

    JavaScript 语言规范的发展JavaScript 引擎的发展

    JavaScript 1.5以后的扩展概要

    基于JavaScript 1.5的框架扩展技术

    Javascript3

    JavaScript语言规范的发展

  • JS1.x –强弩之末

  • JS2.0 –群雄争霸

  • Javascript 1 x

    FF 2.0b1

    [JS 1.7]

    Mozilla FF 0.8[2004.02]

    FF 1.5

    [JS 1.6]

    MozillaFirefox 1.0

    MozFirebird0.6[2003.05]

    Mozilla

    Gecko

    重写Netscape 5

    Netscape Browser 9

    Phoenix 0.1

    NC4.06JavaScript 1.3

    Netscape Browser 8

    Netscape 6Mozilla 0.6

    JavaScript 1.5

    NC4.08

    NC4.8

    Mozilla 开始独立发展JavaScript 1.x

    NC4.5

    JavaScript

    稳定版本

    Mozilla Firefox发布1.0

    Netscape 基于FF发展

    Mozilla开源

    AOL收购

    2006.08 -2006.10

    1999.03

    11

    2000.07

    2001.10

    1998.01

    08

    10

    11

    11

    2002.08

    09

    2004.11 -2005.03

    2007.10

    2005.11

    JScript稳定版本

    IE5.0JScript 5.0

    IE5.01JScript 5.1

    IE5.5JScript 5.5

    IE6.0JScript 5.6

    IE7.0JScript 5.7

    JavaScript 1.x

    NC4.0JavaScript 1.2

    NN3.0JavaScript 1.1

    NN2.0JavaScript 1.0

    10

    Time

    1996.02

    08

    1997.06

    1998.06

    1999.12

    LiveScript

    Mocha

    IE3.0JScript 1.0

    JScript 2.0

    CSS

    IE4.0JScript 3.0

    基于JavaScript 1.1

    ECMA Ed1

    ECMA Ed2

    ECMA Ed3

    JavaScript 1.4只由Netscape服务器端产品实现

    JScript 4.0只包含在Visual Studio早期的SP中

    Javascript

    JavaScript 1.6-1.7

  • JavaScript1.6引入

  • E4X(ECMAScript for XML)

  • 数组项定义方法与迭代方法(item location methods and iterative methods)

  • 数组范型(Array generic)

  • 字符串范型(String generic)

  • JavaScript1.7引入

  • 生成器(generator)

  • 迭代器(iterator)

  • 数组简约式(Array comprehensions)

  • let关键字

  • 析构赋值(Destructuring assignment)

  • for each 语句

  • Javascript 2

    Mozilla Firefox 3

    AIR(framework + AVM)

    Adobe Flex 2.0

    Flash Player 9

    ActionScript 3

    ActionMonkey =

    Tamarin + SpiderMonkey

    JS 1.9

    Tamarin(AVM2)

    IronMonkey =

    IronPython + IronRuby +Tamarin

    Flash Player 7.0

    ActionScript 2

    ScreamingMonkey =

    SpiderMonkey - Mozilla

    Flash Player 5.0

    ActionScript 1.0

    Adobe收购Macromedia

    v2-v4动作

    (action)脚本

    12

    2002.01

    10

    2000.09

    2003.04

    04

    2006.06

    10

    11

    2007.07

    AJAX - RWC

    .NET 1.0

    JScript .NET(7.x)

    ASP.NET AJAX

    Javascript

    Atlas 1.0

    Vector Frames - RIA

    IronPython

    Silverlight 1.0

    .NET 1.1

    Dynamic VB

    Dynamic Language

    JScript.NET 8

    DLR 1.0

    Ruby

    JavaScript 2

    Mozilla 2启动

    Time

    09

    2005

    Today

    2007.11.30

    2008.Q2

    基于AS and JS.NET

    ECMA Ed4

    [interim report]

    TC39-TG1

    [ECMA技术员会39-任务组1]

    ECMA Ed4

    [release?]

    ES3: 对大型软件系统的抽象能力是较弱的,也缺乏一些大型编程系统中常用的机制(例如静态类型检查、早期绑定等)此外,它是基于对象而非面向对象的,因此对象系统的表达能力也不足够。

    AS3: 使用双虚拟机支持AS1-2与AS3,基本重写语言框架。

    Javascript

    JavaScript 2(ECMA Ed4)

  • ECMA Ed4的工作

  • 使用一种规范语言(specification lang.)来描述JS2,最后选定为使用ML(Meta Lang.)

  • 使用ML的一个实现(例如OCaml加上first-class continuation)来发布一个“可执行的规范”

  • JS2规范(的一个参照实现)是“一个用函数式的风格书写、可以阅读、可以进行类型检测和直接运行ECMA Script脚本的可执行程序”

  • 特性(prototype + large app. + optimized(s,t) + VM + ...)

  • 可见性:包、命名空间、私有、内部、公布...

  • 静态类型检查、重写限制(例如基本的全局属性Date,String...)

  • 特别的类型系统:int,double,decimal, classes、interfaces和结构化的类型

  • 更多的结构化作用域:块闭包、块语句与表达式

  • 析构赋值、迭代器、生成器与数组简约式等(in JS1.7)

  • 语义外的包装类不存在了 flase === new Boolean(false)

  • 元类型系统中没有boolean与numeric?

  • 函数声明中的形式参数是强类型的,允许参数省略式(,...rest)

  • More and more ...

  • Javascript4

    JavaScript 引擎的发展

  • 引擎的应用环境 - 外壳、宿主

  • 引擎的谱系

  • 引擎的嵌入

  • 框架扩展与引擎

  • Javascript

    引擎、应用环境

    Native Objects, etc, EvalError()

    Host Objects,

    etc, ActiveXObject()

    Build-in Objects,etc, Object(), Global..

    Your Objects, etc, function MyObject() {...}

    应用环境

    Runtime? JIT? VM?

    宿主(外壳是一种宿主)

    引擎

    Javascript5

    Simple ECMAScript Engine

    (2007.08.15, 2.1.1277)

    SEE

    C

    NGS JS Interpreter 0.24

    (New Generation Software)

    C

    NJS 0.25 alpha

    Free EcmaScript Interpreter(FESI 1.18, 2003.09.29)

    java

    DMDScript

    D

    D Language

    linear_b(7.0~9.24)

    futhark(9.5 or 10+)

    Opera

    JavaScriptCore

    (in safari/webkit)

    JavaScriptCore

    KJS(KDE)

    C++

    Trolltech Qt Script for app.

    Konqueror

    Epimetheus

    C++

    Javascript-C++

    JS

    Javascript-JS

    Narcissus

    NarrativeJS

    java

    Raino

    Javascript-Java

    Raino

    Javascript-C

    JVM

    C

    ActionMonkey

    Netscape

    SpiderMonkey

    Tamarin(AVM2)

    C

    ActionScript1

    ActionScript2

    ActionScript3

    AIR

    ?

    JScript.NET

    JScript

    .NET

    WSH

    Internet Explorer

    DLR

    .NET

    CLR+CTS

    DotGNU JScript

    Mono JScript

    Mono

    JavaScript 引擎的谱系

    ECMA Ed3

    ECMA Ed4

    Dlr vs avm vs jvm

    Mutil-Languages

    Javascript

    IronPython

    Dynamic VB

    Ruby

    JIT compiler

    common infrastructure such as

    Common Hosting Mechanisms

    HOST

    common compiler infrastructure

    CLR

    DLR vs AVM vs JVM

    xVM = vm_sys.eval_opcode(Interpreter(JIT, Code))

    DLR

  • Dynamic type system

  • Dynamic method dispatch

  • Dynamic code generation

  • Hosting API

  •  

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 老生常谈,JavaScript闭包中的this对象

      老生常谈,JavaScript闭包中的this对象

      2016-02-26 10:21

    • 学习JavaScript之this,call,apply

      学习JavaScript之this,call,apply

      2016-01-28 20:45

    • JavaScript复习笔记--字符串

      JavaScript复习笔记--字符串

      2016-01-27 17:16

    • WEB前端教程-JavaScript里的类和继承

      WEB前端教程-JavaScript里的类和继承

      2016-01-21 15:28

    网友点评