研读《js权威指南》

js面向对象的那点事

前言

最近在研读《js权威指南》对js的面向对象机制有了一定的了解，下面跟着实验来做下读书笔记

"."运算符

在真正的去定义一个类前，我们先来看看js的一个运算符号"."，它的作用是进行对象属性的存（写）取（读），它的用法是

存(写) 对象名.属性=值\对象\方法;

取(读) 对象名.属性;

下面来做个实验

View Code

1         var dog = new Object(); //新建一个dog的object对象
 2         dog.name = "boby"; //名字，直接用.给与dog这个object对象添加name属性，并用=赋值"boby"给name这个属性
 3         dog.voice = "wowo"; //声音
 4         dog.weight = 50; //体重
 5 
 6         var foot = new Object(); //脚
 7         foot.count = 4; //腿短
 8         foot.length = 50; //腿长
 9 
10         dog.foot = foot; //直接把对象赋给dog的foot属性
11 
12         dog.makeSound = function () {//直接把方法赋给dog的makeSound属性
13             document.write(dog.voice + "_大家好我的名字叫_" + dog.name + "_我体重_" + dog.weight + "_kg，长了_" + dog.foot.count + "_条腿，腿长_" + dog.foot.length + "_cm，至今单身- -")
14         };
15         dog.makeSound();

 1         var dog = new Object(); //新建一个dog的object对象
 2         dog.name = "boby"; //名字，直接用.给与dog这个object对象添加name属性，并用=赋值"boby"给name这个属性
 3         dog.voice = "wowo"; //声音
 4         dog.weight = 50; //体重
 5 
 6         var foot = new Object(); //脚
 7         foot.count = 4; //腿短
 8         foot.length = 50; //腿长
 9 
10         dog.foot = foot; //直接把对象赋给dog的foot属性
11 
12         dog.makeSound = function () {//直接把方法赋给dog的makeSound属性
13             document.write(dog.voice + "_大家好我的名字叫_" + dog.name + "_我体重_" + dog.weight + "_kg，长了_" + dog.foot.count + "_条腿，腿长_" + dog.foot.length + "_cm，至今单身- -")
14         };
15         dog.makeSound();

执行结果如下：可以看出"."号运算符的强大，他可以直接给任何一个对象属性，这个属性可以是对象和方法

wowo_大家好我的名字叫_boby_我体重_50_kg，长了_4_条腿，腿长_50_cm，至今单身- -

用delete删除对象的属性

用delete可以删除对象的属性

用法如下：

delete obj.property

下面来做个实验

View Code

 1         var dog = new Object(); //新建一个dog的object对象
 2         dog.name = "boby"; //名字，直接用.给与dog这个object对象添加name属性，并用=赋值"boby"给name这个属性
 3         dog.voice = "wowo"; //声音
 4         dog.weight = 50; //体重
 5 
 6         var foot = new Object(); //脚
 7         foot.count = 4; //腿短
 8         foot.length = 50; //腿长
 9 
10         dog.foot = foot; //直接把对象赋给dog的foot属性
11 
12         dog.makeSound = function () {//直接把方法赋给dog的makeSound属性
13             document.write(dog.voice + "_大家好我的名字叫_" + dog.name + "_我体重_" + dog.weight + "_kg，长了_" + dog.foot.count + "_条腿，腿长_" + dog.foot.length + "_cm，至今单身- -")
14         };
15         delete dog.voice;
16         dog.makeSound();

执行结果如下：上面的例子在给dog对象添加完属性之后，调用 delete dog.voice;把voice删除了，所以dog.voice的输出变成了undefined
undefined_大家好我的名字叫_boby_我体重_50_kg，长了_4_条腿，腿长_50_cm，至今单身- -

构造函数（"类"）

在了解"."号运算符号后，我们来定义一个"狗"(dog)的"类"，代码如下:

View Code

1         function dog(v, n, w) {
 2             this.voice = v;
 3             this.name = n;
 4             this.weight = w;
 5             this.makeSound = function () {
 6                 document.write(this.voice + "_大家好我的名字叫_" + this.name + "_我体重_" + this.weight + "_kg,至今单身- -")
 7             };
 8         }
 9 
10         var dog1 = new dog("wowo", "boby", 50);
11         dog1.makeSound();

我们可以看到其实这个所谓的类呢它是一个function，在这里我们称之为构造函数，那么js的构造函数和一般的函数有什么区别呢？主要表现为以下两点

1、构造函数有new运算符调用

2、原文为：传递给它的是一个对新创建的空对象引用，将该引用作为关键字this的值，而且它还要对新创建的对象进行适当的初始化（上例中 dog1传递给了function dog 里面的this ，其实function做了dog1的初始化，就是用this.属性来赋值，其实就等于dog1.属性）

执行结果如下:

wowo_大家好我的名字叫_boby_我体重_50_kg,至今单身- -

prototype

我们已经能建立一个js的类了(一些其他的js模拟面向对象的技术我们先不要深究了，其实万变不离其宗的)，接下来我们来研究一下"继承"，在研究"继承"之前我们要先对prototype有一个了解。

prototype （原型）,js中创建的每个对象都有prototype这个属性，同时创建一个空的prototype对象(原型对象)，而这个prototype属性则"指向"prototype对象（原型对象），每个对象都继承prototype对象(原型对象)的所有属性。是不是拗口得要命，为此我跟着一步一步画了图，图1，图2列出了对象、构造函数、prototype属性、prototype对象的关系：

图1

图2

前面说过js所有的类都有原型对象包括内部的类如String Date等也不例外。

"继承"

有了prototype接下来js的继承就好办了，因为js的继承是基于原型对象的，这里所谓的继承是通过把一类对象公用的属性、方法赋值给prototype对象来实现的，这样该类的所有对象就能调用这些属性和方法了。值得一提的是这些属性和方法只能读，不能写，因为你可以想象以下，假如没个对象都能对prototype对象进行更改，那么prototype对象就不适用于所有改类的对象了。另外一个就是在读prototype对象的属性的时候，对象会先查看以下自己本身有没有这个属性，如果有就不会再度prototype对象的属性，如果没才去读prototype对象的属性，有于这个机制，我们可以称js的继承在查询的时候发生的。下面上书的原图说明js 查询机制：图3

图3

下面来真正用代码来实现下继承

View Code

1         function dog(n, w) {
 2             //this.voice = v;
 3             this.name = n;
 4             this.weight = w;
 5             /*this.makeSound = function () {
 6                 document.write(this.voice + "_大家好我的名字叫_" + this.name + "_我体重_" + this.weight + "_kg,至今单身- -")
 7             };
 8             return "返回值";*/
 9         }
10 
11         dog.prototype.voice = "wowo";
12         dog.prototype.makeSound = function () {
13             document.write(this.voice + "_大家好我的名字叫_" + this.name + "_我体重_" + this.weight + "_kg,至今单身- -<br/>")
14         };
15 
16         var dog1 = new dog("boby", 50);
17         document.write(dog1.voice + "<br/>");
18         dog1.makeSound();
19         document.write("--------------------我是分割线----------------------<br/>");
20         var dog2 = new dog("旺财",30);
21         document.write(dog2.voice + "<br/>");
22         dog2.makeSound();

执行结果如下： dog.prototype.voice dog.prototype.makeSound分别给prototype赋值voice属性（额，这里理解为所有的狗都是"wowo"叫的，比较温柔和狂野的叫法我们暂不考虑）给prototype赋了makeSound（叫）的方法，新建的dog1、dog2都能调用到

wowo
wowo_大家好我的名字叫_boby_我体重_50_kg,至今单身- -
--------------------我是分割线----------------------
wowo
wowo_大家好我的名字叫_旺财_我体重_30_kg,至今单身- -

用了原型对象，voice和makesound只在原型对象中占空间，而不用在每个对象实例中占用空间，大大的节省了空间开销

类属性、类方法

我们同样可以直接给类（构造函数）赋值属性和方法，就是所谓的类属性和类方法，来看下面这段代码

View Code

 1   function dog(n, w) {
 2         this.name = n;
 3         this.weight = w;
 4         }
 5 
 6         dog.voice = "wowo";
 7        
 8         dog.heavier = function (dog1, dog2) {//比较两只狗谁比较重
 9             if (dog1.weight > dog2.weitht) {
10                 document.write(dog1.name+"_比较重");
11             }
12             else {
13                 document.write(dog2.name + "_比较重");
14             }
15         };
16 
17         var dog1 = new dog("boby", 50);
18         var dog2 = new dog("旺财", 30);
19         document.write(dog.voice + "<br/>");
20         dog.heavier(dog1, dog2);

执行结果如下：上例直接用 dog.voice dog.heavier给dog类赋值属性和方法了，用的时候用dog直接调用就行
wowo
旺财_比较重

js类的层次结构

js里具体的类结构图我就不画了，下面给出超类和子类模型，js的所有类的基类就是object类，如图4

图4

至此JS面向对象的机制写完了，当然实战方面，需要大家不断的积累经验，ps：如果觉得那里写得不对请博友们及时指出，不想误了别人，更不想误了自己