风趣的JavaScript面向对象入门课程一

Posted 2020-10-07 七月下枫瑾

在我们程序猿界一直流传这这么一个joke，没女票我们可以new一个、没房子没票子没车子我们同样new一个！当然这听着更像是一种自嘲，毕竟我们程序猿都爱自嘲，哈哈，废话不多说，今天就由我带着你们来入javascript面向对象这个坑！千万别弃坑！

 

 

一、理解对象：

创建对象的两种方法：直接声明、Object的实例化

直接声明：

 1 Var zhangsan = {
 2 
 3 Name : “zhangsan”,
 4 
 5 Age : 29,
 6 
 7 //创建一个introduce函数，用于返回张三的姓名
 8 
 9 introduce.function(){
10 
11 return zhangsan.name;
12 
13 }
14 
15 }

 

Object的实例化：

 1 Var zhangsan = new Object();
 2 
 3 zhangsan.name = “zhangsan”;
 4 
 5 zhangsan.age = 29;
 6 
 7 zhangsan.introduce = function(){
 8 
 9 return zhangsan.name;
10 
11 };
12 
13  

 

调用方法：

1 Document.write(zhangsan.name+zhangsan.age);或者
2 
3 Alert(zhangsan.introduce());

 

二、类的实现：

 

工厂生产对象：适用于当需要大规模输出对象时的问题

 1 Function CreateCar(engine,tire){
 2 
 3 Var car = new Object();
 4 
 5 car.engine=engine;
 6 
 7 car.tire   = tire;
 8 
 9 return car;
10 
11 }

 

调用工厂生产对象：

Var Audi = CreateCar（”four-engine”,”four-tire”）；

生产出Audi一辆，即new了一个对象

说白了，工厂模式就是把创建对象的方法封装在函数中。

 

实际上，当你用instanceof运算符对实例Audi检测时：

Alert(Audi instanceof car);

结果会弹出对话框显示false。

即Audi不是car实例化出的对象！

 

三、构造函数

为解决上述问题特引入构造函数大佬

将以上的代码略作改写：

 1 Function CreateCar(engine,tire){
 2 
 3 this.engine=engine;
 4 
 5 this.tire=tire;
 6 
 7 this.drive = function(){
 8 
 9 document.wirte(this.engine+this.tire);
10 
11 };
12 
13 }

 

其实构造函数就是一个带this的普通函数，它不是大佬，哈哈！它里面的this就指通过这个构造函数生成一个新的对象。

 

虽说我们揭开了它大佬的面纱，但大佬还是大佬，它还是有用的..

 

1 Var Audi = new car（”four-engine”,”four-tire”）；
2 
3  
4 
5 Alert（Audi instanceof car）；

 

结果惊人的弹出显示：true

大佬果然是大佬！

但问题又来了，大佬也不是没有缺点，它的模式虽然好用，但是存在浪费内存的嫌疑，这就让大佬的声誉受到了严重的影响：

                       

每一次生成一个person对象，都必须重新构建一遍sayName函数，真的麻烦！

 

铛,铛,铛！震惊 “全局函数” 出场竟然..

 

1 Function sayName(){
2 
3    Document.write(this.name);
4 
5 }

 

然后再把person类中将sayName()指向外部的sayName（）

this.sayName = sayName;

厉害了wold哥！

 

 

问题又来了，在全局变量中定义的函数只能被某个对象所调用，让这个函数有点名不副实的样子，而且当对象如果需要很多方法，就需要定义同样多的全局变量。这样对象的封装就毫无意义可言。这些问题我们都可以通过原型模式（Prototype）来解决。

 

原来一山更比一山高啊，这世外高人第一次见..

    Person.prototype.sayName = function (){

        document.write (this.name);

};

 

与之前的：

Function sayName(){

   Document.write(this.name);

}

 

相比，第二个好low!

 

那么这位世外高人有什么用呢？

 

废话不多说上代码：

personA.sayName = function(){

    document.write("personA:"+this.name+"<br/>");

}//对父对象中的方法进行复写，personA是person函数实例化出的一个新对象

 

哇！QAQ

本期的风趣的JavaScript面向对象课程就结束啦，谢谢大家的浏览和指正！我们下期再见！