24
范范

Java Script对象模型

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Java Script对象模型

范武

Page 2: Java Script对象模型

JavaScript对象(nearly) Everything is a Hash

There Are No Classes in JavaScript

Functions Are Objects(values)

Page 3: Java Script对象模型

对象和函数

Page 4: Java Script对象模型

类型识别typeof

Instanceof

Constructorthis.prototype = {constructor : this};

Page 5: Java Script对象模型

对象构造过程 Instead, I think of

constructors as being like “cookie cutters” for objects. When a function is used with the new operator, it’s called in a special way: instead of executing the function normally and returning a result, a new blank object is created. Then, when the function is called, its this operator points to that new blank object. Additionally, the constructor property of the blank object is set to point to the constructor function itself.

Page 6: Java Script对象模型

prototypeEvery function has a prototype property and it

contains an object.only function naturelly have a prototype property,

by default it is an object.The difference between own properties and

properties of the prototype__proto__, the secret link every object keeps to its

prototypeMethods such as isPrototypeOf(),

hasOwnProperty(), and propertyIsEnumerable()How to enhance built-in objects, such as arrays

or strings

Page 7: Java Script对象模型

Prototype构造函数在构造对象时,会在对象内生成一个“隐

藏”的 __proto__ 属性指向构造函数的 prototype对象。

在对象查找属性时,先在对象的上下文 ( Context)中查找,如果查找不到再到 __proto__ 中进行查找,并一直递归下去。

Page 8: Java Script对象模型

Prototype Chain

Page 9: Java Script对象模型

Prototypal-inheritance 对象的构造函数可以从其他对象中继承方法,它创建一个 原型 对象后,所有

其他的新对象都可以基于这个原型对象来构建。 整个过程都是通过原型 属性 来实现的(每个函数都有这个属性)。原型式继

承适用于单继承而非多继承。

这种继承方式之所以特别难以掌握,是因为原型本身不会从其他原型或者构造函数中继承属性,而属性都是从实际对象那里继承过来的。

User.prototype = new Person(); User 是对 User 对象构造函数的引用。 new Person() 使用 Person 构造函

数构造一个新的 Person 对象,然后把 User 构造函数的原型置为这个操作的结果。也就是说当你 new User() 时,得到新的 User 对象都会带有 Person对象所有的方法,如同通过操作 new Person() 得到一样。

  构造函数的 prototype 储存的是一个对象,当你改变这个对象的属性时,所

有根据这个构造函数生成的对象中“继承”自 prototype 的属性都会发生改变。

Page 10: Java Script对象模型

class type inheritance标准 class 的声明形式

注意事项

Class 的几种封装

Page 11: Java Script对象模型

Class type inheritance - prototypeClass.create 的使用

Old typeNew type

Class.create 的实现

prototype_class_sample.js

Page 12: Java Script对象模型

Class type inheritance - mootoolsUsage:

ExtendsImplements

ImplementationKlassmutators

Page 13: Java Script对象模型

Class type inheritance - Dojo

Usagedeclare

implementation

Page 14: Java Script对象模型

namespace 使用 namespace 封装代码

Namespace 声明工具

Page 15: Java Script对象模型

moduleDogulas Crockford

YUI

Closure pattern

Page 16: Java Script对象模型

Mix-in来源于 Python, Ruby

将模块 (module) 中的变量或函数“混入”到类中

本质上就是代码拷贝

示例: Enumerable

Page 17: Java Script对象模型

PrototypalNo class, just object

No inheritance, just prototype and mix-in

Mochikit

Page 18: Java Script对象模型

Functional styleOliver Steele – functional.js

Eugene Lazutkin - Dojo

2D 3D 图形计算

Page 19: Java Script对象模型
Page 20: Java Script对象模型

Q1:function f1(){ return 1;}

var f2 = function(){return 2;};

var f3 = new Function("return 3; ");

Page 21: Java Script对象模型

Q2var func1 = function(){ this.member_function = function(){ //..... };}

var func2 = function(){}func2.prototype.memeber_function = function(){ //...}

Page 22: Java Script对象模型

Q3如果模仿 java 的 package

Package

import

Page 23: Java Script对象模型

Q4Mix-in 的意义

是否需要对 mix-in 添加类型识别

Page 24: Java Script对象模型

Q5What is this

Where is this

Bind this