小熊吐槽JavaScript基础教程，Are you OK?

小熊学IT 2017-01-22 11:51

小熊吐槽JavaScript基础教程，Are you OK?

1. Object构造函数方法

 var person = new Object();
 person.name = "Nicholas";
 person.age = 29;
 person.job = "Software Engineer";
 
 person.sayName = function(){
 console.log(this.name);
 }

2.对象字面量方法

 var person = {
 name: "Nicholas",
 age: 29,
 job: "Software Engineer",
 
 sayName: function(){
 console.log(this.name);
 }
 };

如果在html环境下，为了便于输出，可以将 console.log() 替换成 alert() ,以下代码同理。

和传统的面向对象语言相比较，上述的对象创建方式存在明显的问题。第一个问题，对象的创建代码并不能实现很好的复用，第二个问题，使用同一个接口创建很多对象，会产生大量的重复代码。

以下提出了几种创建对象的模式，针对每种模式，本文中会针对上述两个问题以及其他问题进行优缺点分析。

小熊吐槽JavaScript基础教程，Are you OK?

一、工厂模式

工厂模式用函数封装了以特定接口创建对象的细节

 function createPerson(name, age, job){ 
 var o = new Object(); 
 o.name = name; 
 o.age = age; 
 o.job = job; 
 o.sayName = function(){ 
 console.log(this.name); 
 }; 
 return o;
 }
 
 var person1 = createPerson("Nicholas", 29, "Software Engineer");
 var person2 = createPerson("Greg", 27, "Doctor");
 
 person1.sayName(); //"Nicholas"
 person2.sayName(); //"Greg"
 console.log(person1.sayName == person2.sayName); //false

工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别的问题，即通过这种方式创建的对象通过instanceof确定的对象类型只能是Object。可以看出，每创建一个对象， sayName() 方法都会被重复定义一次，造成了冗余。

二、构造函数模式

使用构造函数模式重写前面的例子，如下：

 function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = function(){ 
 console.log(this.name); 
 }; 
 } 
 
 var person1 = new Person("Nicholas", 29, "Software Engineer");
 var person2 = new Person("Greg", 27, "Doctor");
 
 person1.sayName(); //"Nicholas"
 person2.sayName(); //"Greg"
 
 console.log(person1 instanceof Object); //true
 console.log(person1 instanceof Person); //true
 console.log(person2 instanceof Object); //true
 console.log(person2 instanceof Person); //true
 
 console.log(person1.sayName == person2.sayName); //false

小熊吐槽JavaScript基础教程，Are you OK?

从代码可以看出，创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型，而这正是构造函数模式胜过工厂模式的地方。但是和工厂模式一样， sayName() 方法被重复定义的问题并没有得到解决，为什么在传统的面向对象语言比如Java，C++中这么写不会产生这个问题呢？因为ECAMScript中的函数是对象，所以每定义一个函数，也就是实例化了一个对象，本质上就造成了对象的重复创建，所以说会造成冗余，而在Java，C++中，函数仅仅是函数而已。

好了，既然这样，那我们就尝试把函数定义转移到构造函数的外部：

 function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = sayName; 
 } 
 
 function sayName(){ 
 console.log(this.name);
 }
 
 var person1 = new Person("Nicholas", 29, "Software Engineer");
 var person2 = new Person("Greg", 27, "Doctor");14 15 person1.sayName();
 //"Nicholas"16 person2.sayName(); //"Greg"17 18 
console.log(person1.sayName == person2.sayName); //true

看起来问题好像解决了，两个实例共享了全局的 sayName() ，但是这么写，却带来新的问题，如果某个类型需要相当多的自定义函数，而这些函数全都被定义为了全局函数，那么这个类型还有什么封装性可言。

欢迎大家在下方积极吐槽，小编会一一进行查看并回复，期待你的答案哦……

------------------------------------------

如果喜欢请转发，小小支持一下。

更多精彩文章请关注 本头条号（小熊学IT ） 或 微信公众号 ITDetail（小熊学IT ），更有机会联系小熊为你在IT行业的答疑解惑……