博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js面向对象
阅读量:7095 次
发布时间:2019-06-28

本文共 2758 字,大约阅读时间需要 9 分钟。

hot3.png

目录[-]

1.js相关概念

:开发者在开发时,自己定义的概念,在js代码中无实际对应. 

构造函数:用于构造实例,js中定义的概念,在js中有实际对应代码。人为地可以将函数分为两类:一类用于构造实例,被称为构造函数;一类用于执行某一特定功能,被成为功能函数。 
原型:每一个Function的实例定义都会有一个prototype属性;每一个Object的实例都会有一个_proto_属性。 
实例:又被成为对象,是由构造函数构造出来。

2.创建实例的方式

1.最简单方式

01 var car = {
02     color : "blue",
03     doors : 4,
04     showDoors : function() {
05         alert(this.doors);
06     }
07 };
08  
09 car.mpg = 25;
10 car.showColor = function() {
11     alert(this.color);
12 };

优点:简单直观,跟json数据结构很像。 

缺点:当需要创建大量实例时,这种方式非常低效。

2.工厂方式

01 function createCar() {
02     var car = {
03         color : "blue",
04         doors : 4,
05         showDoors : function() {
06             alert(this.doors);
07         }
08     };
09  
10     car.mpg = 25;
11     car.showColor = function() {
12         alert(this.color);
13     };
14  
15     return car;
16 }
17  
18 var car1 = createCar();
19 var car2 = createCar();

优点:基本解决了大量创建相同实例的问题。 

缺点:不够正规;没有实现函数共享;

3.构造函数方式

所有上述问题都引发了构造函数的出现。构造函数看起来很像工厂函数,根据惯例,构造函数名字的首字母大写,以使它与首字母通常是小写的函数名分开。

01 function Car() {
02     this.color = "blue";
03     this.doors = 4;
04     this.mpg = 25;
05  
06     this.showColor = function() {
07         alert(this.doors);
08     };
09     this.showDoors = function() {
10         alert(this.color);
11     }
12 }
13  
14 var car1 = new Car();
15 var car2 = new Car();

PS:与工厂函数的区别:1. 函数名大写;2. 函数内部使用this关键字;3. 不必明确使用 return 运算符;4. 创建实例时使用new关键字。

优点:基本解决了大量创建相同实例的问题;够正规; 

缺点:没有实现函数共享;

4.原型方式

01 function Car() {
02 }
03  
04 Car.prototype = {
05     color : "blue",
06     doors : 4,
07     mpg : 25,
08  
09     showDoors : function() {
10         alert(this.doors);
11     },
12     showColor : function() {
13         alert(this.color);
14     }
15 };
16  
17 var car1 = new Car();
18 var car2 = new Car();

优点:原型的所有属性都被立即赋予要创建的实例,实现了函数共享;够正规; 

缺点:原型的属性被多个实例共享,不应该。

5.混合的构造函数/原型方式

联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。

构造函数定义实例的所有非函数属性,用原型方式定义实例的函数(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

01 function Car() {
02     this.color = "blue";
03     this.doors = 4;
04     this.mpg = 25;
05 }
06  
07 Car.prototype = {
08     showDoors : function() {
09         alert(this.doors);
10     },
11     showColor : function() {
12         alert(this.color);
13     }
14 };
15  
16 var car1 = new Car();
17 var car2 = new Car();

优点:实现了函数共享,属性不共享;够正规;js面向对象采用的主要方式,它具有其他方式的特性,却没有他们的副作用. 

缺点:视觉上,与其他面向对象语言定义类与对象的方法不同。

6.动态原型方法

动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

01 function Car() {
02     this.color = "blue";
03     this.doors = 4;
04     this.mpg = 25;
05  
06     if ( typeof Car._initialized == "undefined") {
07         Car.prototype = {
08             showDoors : function() {
09                 alert(this.doors);
10             },
11             showColor : function() {
12                 alert(this.color);
13             }
14         };
15  
16         Car._initialized = true;
17     }
18 }
19  
20 var car1 = new Car();
21 var car2 = new Car();

优点:实现了函数共享,属性不共享;够正规;视觉上,基本上与其他面向对象语言定义类与对象的方法相同。 

缺点:无

总结:采用哪种方式

如前所述,目前使用最广泛的是混合的构造函数/原型方式。此外,动态原始方法也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。

转载于:https://my.oschina.net/Weiwanbinblogs/blog/184597

你可能感兴趣的文章
MongoDB启用身份验证
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
5.SpringMVC
查看>>
4.Java JSON使用
查看>>
XWork中的数据流与控制流
查看>>
洛谷——P2656 采蘑菇
查看>>
不知不觉我自己习惯了晚睡
查看>>
我的友情链接
查看>>
让电影尖叫:京东众筹试水跳板时代
查看>>
53 网络虚拟化技术进阶
查看>>
Linux(CentOS)最小化(mini)安装VMware Tools
查看>>
php中$_GET传递数组的实现
查看>>
Android源代码编译——下载
查看>>
if usage
查看>>
passive-interface / silent-interface
查看>>
Linux 基础环境配置
查看>>
业界动态
查看>>
磁盘df看还有剩余空间,但是创建文件时报错,提示磁盘已经满问题解决
查看>>
用艾宾浩斯曲线记忆周期来背单词是否有理论依据?
查看>>