研读《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对象的关系：
前面说过js所有的类都有原型对象 包括内部的类如String Date等也不例外。
"继承"
下面来真正用代码来实现下继承
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
至此JS面向对象的机制写完了，当然实战方面，需要大家不断的积累经验，ps：如果觉得那里写得不对请博友们及时指出，不想误了别人，更不想误了自己
copyright ? Tim demo下载
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息