Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add grammar/object

  • Loading branch information...
commit 02fb720841630d2ee8b2c950b26ad51c32045e21 1 parent 8c2c18b
@ruanyf authored
View
4 _config.yml
@@ -5,6 +5,7 @@ sitename: Javascript 标准教程
chapters:
- grammar
+- oop
- dom
- htmlapi
- jquery
@@ -12,8 +13,9 @@ chapters:
- algorithm
grammar: 基本语法
+oop: 面向对象编程
dom: DOM
htmlapi: HTML5 API
-algorithm: 算法(Algorithm)
+algorithm: 算法
jquery: jQuery
tool: 开发工具
View
2  _includes/footer.html
@@ -1,7 +1,7 @@
<footer>
<div class="row">
<div class="twelve columns">
-<p>last modified on {{ site.time | date: "%Y-%m-%d" }} </p>
+<p>last modified on {{ page.modifiedOn | date: "%Y-%m-%d" }} </p>
</div>
</div>
</footer>
View
4 _layouts/homepage.html
@@ -6,7 +6,9 @@
<div class="row">
<div class="twelve columns">
-<h1 tabindex="1">{{ page.title }}</h1>
+<h1>{{ page.title }}</h1>
+
+<p>作者:<a href="http://www.ruanyifeng.com">阮一峰</a></p>
{% include toc.html %}
View
2  _layouts/page.html
@@ -6,7 +6,7 @@
<div class="row">
<div class="twelve columns">
-<h1 tabindex="1"> {{ page.title }} </h1>
+<h1> {{ page.title }} </h1>
<aside class="right"><p>来自<a href="/">《{{ site.sitename }}》</a></p></aside>
View
1  algorithm/sorting.md
@@ -3,6 +3,7 @@ title: 排序算法(Sorting)
date: 2012-12-02
category: algorithm
layout: page
+modifiedOn: 2012-12-02
---
## 冒泡算法(Bubble Sort)
View
1  dom/classlist.md
@@ -3,6 +3,7 @@ title: classList API
category: dom
layout: page
date: 2012-11-22
+modifiedOn: 2012-11-22
---
这个API是操作网页元素的class属性的接口。
View
1  dom/dataset.md
@@ -3,6 +3,7 @@ layout: page
title: dataset API
date: 2012-11-22
category: dom
+modifiedOn: 2012-11-22
---
这个API用于操作网页元素的data-属性。
View
1  grammar/array.md
@@ -3,6 +3,7 @@ title: 数组
date: 2012-12-11
category: grammar
layout: page
+modifiedOn: 2012-12-11
---
## 数组与字典
View
262 grammar/object.md
@@ -0,0 +1,262 @@
+---
+title: 对象(Object)
+layout: page
+category: grammar
+date: 2012-12-12
+modifiedOn: 2012-12-12
+---
+
+## 概述
+
+### 字典结构
+
+对象(object)是Javascript语言对字典结构(dictionary)的实现,由若干个“键值对”(key-value)构成。
+
+{% highlight javascript %}
+
+var o = {
+
+ p: "Hello World"
+
+};
+
+{% endhighlight %}
+
+上面代码中的o被定义为对象,里面包含一个键值对,这个键值对就是对象o的成员。其中,p是“键”(成员的名称),“Hello World”是“值”(成员的值)。“键”又称为“属性”(property)。
+
+### 生成方法
+
+对象用大括号{}表示。
+
+生成一个对象,可以直接用{},可以用new Object()命令。
+
+{% highlight javascript %}
+
+var o = {};
+
+// or
+
+var o = new Object();
+
+{% endhighlight %}
+
+## 属性(property)
+
+### 引用方法
+
+引用一个属性,有两种方法,一种是点结构,还有一种是方括号。
+
+{% highlight javascript %}
+
+var o = {
+
+ p: "Hello World"
+
+};
+
+// 点结构
+console.log(o.p); // Hello World
+
+// 方括号
+console.log(o["p"]); // Hello World
+
+{% endhighlight %}
+
+这两种方法,不仅可以引用到该属性对应的值,还可以用来赋值。
+
+{% highlight javascript %}
+
+o.p = "abc";
+o["p"] = "abc";
+
+{% endhighlight %}
+
+Object.keys方法可以返回对象本身的属性。
+
+{% highlight javascript %}
+
+Object.keys(object)
+
+{% endhighlight %}
+
+### 存取函数(accessor)
+
+属性还可以用存取函数(accessor)定义。存值函数称为setter,使用set关键字;取值函数称为getter,使用getter关键字。
+
+{% highlight javascript %}
+
+var o = {
+
+ get p() {
+ return "Getter";
+ },
+
+ set p(value) {
+ console.log("Setter: "+value);
+ }
+}
+
+{% endhighlight %}
+
+定义存取函数之后,引用该属性时,取值函数会自动调用;赋值该属性时,存值函数会自动调用。
+
+{% highlight javascript %}
+
+> o.p
+'Getter'
+
+> o.p = 123;
+Setter: 123
+
+{% endhighlight %}
+
+### 属性的attributes对象
+
+系统内部,每个属性都有一个对应的attributes对象,保存该属性的一些元信息。
+
+attributes对象包含如下属性:
+
+- Value:表示该属性的值,默认为undefined。
+- Writable:表示该属性的值(value)是否可以改变,默认为false。
+- Get:表示该属性的取值函数(getter),默认为undefined。
+- Set:表示该属性的存值函数(setter),默认为undefined。
+- Enumerable: 该属性是否可枚举,默认为false。
+- Configurable:该属性是否可配置,false。当为false时,你无法删除该属性,除了value,无法改变该属性的其他性质。Configurable控制该属性元数据的可写状态。
+
+有了attributes对象,就可以描述其对应的属性。
+
+{% highlight javascript %}
+
+ {
+ value: 123,
+ writable: false,
+ enumerable: true,
+ configurable: false
+ }
+
+{% endhighlight %}
+
+### Object.defineProperty方法
+
+该方法允许通过定义attributes对象,来定义一个属性,然后返回修改后的对象。它的格式是
+
+{% highlight javascript %}
+
+Object.defineProperty(object, propertye, attributes)
+
+{% endhighlight %}
+
+比如,前面的例子可以改写成
+
+{% highlight javascript %}
+
+var o = Object.defineProperty({}, "p", {
+ value: 123,
+ enumerable: true
+});
+
+{% endhighlight %}
+
+如果一次性定义多个属性,可以使用下面的写法。
+
+{% highlight javascript %}
+
+var o = Object.defineProperty({}, {
+ p1: { value: 123, enumerable: true },
+ p2: { value: "abc", enumerable: true }
+});
+
+{% endhighlight %}
+
+### Object.getOwnPropertyDescriptor方法
+
+该方法返回属性的attributes对象,格式如下
+
+{% highlight javascript %}
+
+Object.getOwnPropertyDescriptor(object, property)
+
+{% endhighlight %}
+
+使用方法如下:
+
+{% highlight javascript %}
+
+> var o = Object.defineProperty({}, "p", {
+ value: 123,
+ enumerable: true
+});
+
+> Object.getOwnPropertyDescriptor(o, "p")
+{
+ configurable: false
+ enumerable: true
+ value: 123
+ writable: false
+}
+
+{% endhighlight %}
+
+### 可枚举性
+
+可枚举性与两个操作有关:for-in和Object.keys。如果可枚举性为true,则前面两个操作的返回结果都包括该属性;如果为false,就不包括。
+
+假定,对象o有两个属性p1和p2,可枚举性分别为true和false。
+
+{% highlight javascript %}
+
+var o = Object.defineProperties({}, {
+ p1: { value: 1, enumerable: true },
+ p2: { value: 2, enumerable: false }
+});
+
+{% endhighlight %}
+
+那么,for-in操作和Object.keys操作的返回结果,将不包括p2。
+
+{% highlight javascript %}
+
+> for (var x in o) console.log(x);
+ p1
+
+> Object.keys(o)
+ ["p1"]
+
+{% endhighlight %}
+
+除了上面两个操作,其他操作都不受可枚举性的影响。
+
+{% highlight javascript %}
+
+ > Object.getOwnPropertyNames(o)
+ ["p1", "p2"]
+
+{% endhighlight %}
+
+一般来说,系统原生的属性都是不可枚举的。
+
+{% highlight javascript %}
+
+ > Object.keys([])
+ []
+
+ > Object.getOwnPropertyNames([])
+ [ 'length' ]
+
+ > Object.keys(Object.prototype)
+ []
+
+ > Object.getOwnPropertyNames(Object.prototype)
+ [ 'hasOwnProperty',
+ 'valueOf',
+ 'constructor',
+ 'toLocaleString',
+ 'isPrototypeOf',
+ 'propertyIsEnumerable',
+ 'toString' ]
+
+{% endhighlight %}
+
+## 参考链接
+
+- Dr. Axel Rauschmayer,[Object properties in JavaScript](http://www.2ality.com/2012/10/javascript-properties.html)
View
1  htmlapi/canvas.md
@@ -3,6 +3,7 @@ title: Canvas API
layout: page
date: 2012-11-21
category: htmlapi
+modifiedOn: 2012-11-21
---
## 转化图像文件到Canvas
View
1  htmlapi/file.md
@@ -3,6 +3,7 @@ title: File API
date: 2012-11-30
layout: page
category: htmlapi
+modifiedOn: 2012-11-30
---
这个API用于操作用户通过表单选取的本地文件。
View
1  htmlapi/fullscreen.md
@@ -3,6 +3,7 @@ layout: page
title: Fullscreen API
category: htmlapi
date: 2012-11-22
+modifiedOn: 2012-11-22
---
这个API可以控制浏览器的全屏显示。
View
1  htmlapi/pagevisibility.md
@@ -3,6 +3,7 @@ title: Page Visibility API
layout: page
date: 2012-11-20
category: htmlapi
+modifiedOn: 2012-11-20
---
这个API用于判断页面是否处于浏览器的当前窗口,即是否可见。
View
8 index.md
@@ -2,12 +2,18 @@
layout: homepage
title: Javascript 标准教程
date: 2012-11-18
+modifiedOn: 2012-12-12
---
<h2 id="grammar">基本语法</h2>
+- [对象(Object)](grammar/object.html)
- [数组](grammar/array.html)
+<h2 id="oop">面向对象编程</h2>
+
+- [对象的继承](oop/inheritance.html)
+
<h2 id="dom">DOM</h2>
* [dataset](dom/dataset.html)
@@ -29,7 +35,7 @@ date: 2012-11-18
- [性能测试(Benchmark)](tool/benchmark.html)
- [PhantomJS](tool/phantomjs.html)
-<h2 id="algorithm">算法(Algorithm)</h2>
+<h2 id="algorithm">算法</h2>
* [排序(sorting)](algorithm/sorting.html)
View
1  jquery/deferred.md
@@ -3,6 +3,7 @@ title: jQuery.Deferred对象
category: jquery
date: 2012-12-07
layout: page
+modifiedOn: 2012-12-07
---
## 概述
View
44 oop/inheritance.md
@@ -0,0 +1,44 @@
+---
+title: 对象的继承
+layout: page
+date: 2012-12-12
+modifiedOn: 2012-12-12
+category: oop
+---
+
+## 属性的继承
+
+属性分成两种。一种是对象自身的属性,另一种是继承自原型的属性。
+
+### 对象本身的属性
+
+对象本身可枚举的属性,可以用Object.keys方法取得。
+
+{% highlight javascript %}
+
+Object.keys(obj)
+
+{% endhighlight %}
+
+对象本身的所有属性,不管是否可枚举,可以用下面的方法取得
+
+{% highlight javascript %}
+
+Object.getOwnPropertyNames(object)
+object.hasOwnProperty(property)
+
+{% endhighlight %}
+
+### 对象的继承属性
+
+对象所有可枚举的属性,可以用for-in循环得到。
+
+{% highlight javascript %}
+
+for (property in object)
+
+{% endhighlight %}
+
+## 参考链接
+
+- Dr. Axel Rauschmayer, [JavaScript properties: inheritance and enumerability](http://www.2ality.com/2011/07/js-properties.html)
View
1  tool/benchmark.md
@@ -3,6 +3,7 @@ title: Javascript 性能测试
date: 2012-12-09
layout: page
category: tool
+modifiedOn: 2012-12-09
---
## 第一种做法
View
1  tool/phantomjs.md
@@ -3,6 +3,7 @@ layout: page
title: PhantomJS
date: 2012-12-08
category: tool
+modifiedOn: 2012-12-08
---
## 概述
Please sign in to comment.
Something went wrong with that request. Please try again.