js面向对象的那点事
前言
最近在研读《js权威指南》对js的面向对象机制有了一定的了解，下面跟着实验来做下读书笔记
"."运算符
在真正的去定义一个类前，我们先来看看js的一个运算符号"."，它的作用是进行对象属性的存（写）取（读），它的用法是
存(写) 对象名.属性=值\对象\方法;
取(读) 对象名.属性;
下面来做个实验
View Code1 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 Code1 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 Code1 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 Code1 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 Code1 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：如果觉得那里写得不对请博友们及时指出，不想误了别人，更不想误了自己
copyright © Tim demo下载