前言
最近在研读《js权威指南》对js的面向对象机制有了一定的了解,下面跟着实验来做下读书笔记
"."运算符
在真正的去定义一个类前,我们先来看看js的一个运算符号".",它的作用是进行对象属性的存(写)取(读),它的用法是
存(写) 对象名.属性=值\对象\方法;
取(读) 对象名.属性;
下面来做个实验
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
下面来做个实验
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)的"类",代码如下:
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
下面来真正用代码来实现下继承
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只在原型对象中占空间,而不用在每个对象实例中占用空间,大大的节省了空间开销
类属性、类方法
我们同样可以直接给类(构造函数)赋值属性和方法,就是所谓的类属性和类方法,来看下面这段代码
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:如果觉得那里写得不对请博友们及时指出,不想误了别人,更不想误了自己
copyright © Tim demo下载