js面向对象的那点事

时间:2022-06-01 19:52:38

前言


    最近在研读《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();

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

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

 

用delete删除对象的属性


    用delete可以删除对象的属性

    用法如下:

    delete obj.property

    下面来做个实验 

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         delete dog.voice;
16         dog.makeSound();

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

 

构造函数("类")


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

js面向对象的那点事js面向对象的那点事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面向对象的那点事

 图1

 

js面向对象的那点事

 图2

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

 

 

 "继承"


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

js面向对象的那点事

 图3

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

js面向对象的那点事js面向对象的那点事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只在原型对象中占空间,而不用在每个对象实例中占用空间,大大的节省了空间开销

 

类属性、类方法


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

js面向对象的那点事js面向对象的那点事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面向对象的那点事

图4

 

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

copyright © Tim demo下载