JavaScript 创建对象的四种常见模式(附《高程3》下载地址)

写在前面

因为本人想回顾一遍JavaScript基于原型继承的相关知识,所以开始翻查过去的笔记和相关博客,想来想去还是先从创建对象这一块入手,这个地方讲的比较清楚的应该首推《JavaScript高级编程指南》。下面的内容80%出自这本书的第五章,如果大家不想翻书的话,姑且可以先看看我的这篇抄书笔记~

后文附赠了这本圣经的高清第三版下载地址,希望能节省各位查询下载的时间。下面开始介绍创建对象的几种常见模式(寄生构造函数模式和稳妥构造函数模式等不常见的模式暂且忽略,等后面关于原型链的文章继续填坑~)

工厂模式

考虑到ECMAScript无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下例子所示:

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('feng', 25, 'enginner');
var person2 = createPerson('yun', 52, 'doctor');

可以无数次调用createPerson(), 每次都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但是无法解决对象识别的问题(类型都是Object,我们希望能返回类型为function并且具有特征name的对象),于是就有了下面的构造函数模式。

构造函数模式

构造函数可以用来创建特定类型的对象

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('feng', 25, 'enginner');
var person2 = new Person('yun', 52, 'doctor');

在本方法中我们使用到了new操作符来达到目的。以这种方式调用构造函数实际上会经历一下四个步骤

  • 创建一个新对象(让空对象的'_proto'属性指向Person.prototype,详见下文)
  • 将构造函数的作用域赋值给新对象(因此this指向了这个新对象)
  • 执行构造函数中的代码(为这个新对象添加属性)
  • 返回新对象

创建自定义的构造函数意味着将来可以将它的实例标志为一个特定的类型;而这正是构造函数模式胜过工厂模式的地方。

console.log(person1.constructor === Person);//true
console.log(person2.constructor === Person);//true

console.log(person1 instanceof Object);//true
console.log(person1 instanceof Person);//true
console.log(person2 instanceof Object);//true
console.log(person2 instanceof Person);//true

何为构造函数

构造函数与其他函数唯一的区别,就在于调用他们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那他就可以当做构造函数;不通过new来调用,则就是普通函数。上面构造器模式中的Person()函数可以通过下面任何一种方式来调用:

var person = new Person('feng', 25, 'enginner');
console.log(person.sayName());//feng

Person('duang', 101, 'god');//函数直接调用,this绑定到window
window.sayName();//duang

构造函数的问题

每个方法都要在每个实例上重新创建一遍。在前面的例子中,person1person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例(ECMAScript中,函数就是对象,因此每定义一个函数,也就实例化了一个对象)。从逻辑上讲,此时的构造函数也可以这样定义:

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;

  this.sayName = new Function("console.log(this.name)")
}

因此不同实例上的同名函数实不相等的

console.log(person1.sayName == person2.sayName);//false

这样做浪费内存,我们希望得到一种能把共享的属性和方法放到同一个容器的模式,于是就有了下文的原型模式。

原型模式

原型模式初步

我们创建的每个函数在生成的一瞬间,都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可由特定类型的所有实例共享的实例和方法,这个对象一般称为这个函数的 原型对象(prototype)。所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指回构造函数。

使用原型对象的好处就是可以让所有的实例对象共享原型所包含的属性和方法。

function Person(){}

Person.prototype.name = 'Nicholas';
Person.prototype.age = '29';
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
  console.log(this.name);
}

var person1 = new Person();
person1.sayName();//feng

var person2 = new Person();
person.sayName();//feng

console.log(person1.sayName == person2.sayName);//true

与构造函数模式不同的是,新对象的属性和方法是有所有实例所共享的。

理解原型

默认情况下,具体的关系如下所示

原型链示意图

注:
(2)中,如果手动分配了原型指针(重写了原型对象,比如将原型对象重新声明为一个字面量对象),则需要手动为原型添加constructor属性,重新建立构造函数和原型对象之间的关系
(5)中,Chrome 中可以通过_proto_访问到该属性,而在IE中是不可见的。

上面那段代码参考上图的关系如下:

从上图可见,构造函数和实例对象没有直接关系!当解释器读取某个对象的某个属性的时候,都会按照上图中的实现执行一遍搜索,目标是具有给定名字的属性。搜索首先从对象实例开始,如果在实例中找到该属性则返回,如果没有则继续搜索指针指向的原型对象(prototype),如果还是没有找到则继续递归prototypeprototype对象,直到找到为止,如果递归到object(原型链最顶端)仍然没有则返回错误。

可以通过对象事例访问保存在原型中的值,但却不能通过对象事例重写原型中的值。如果在实例中定义和原型中同名的属性或函数,则会事例中的属性会覆盖原型中的同名属性。

重写原型

上面例子中,每添加一个属性和方法都要敲一遍Person.prototype。为了减少不必要的输入,更常见的写法是用一个包含所有属性和方法的字面量对象来从斜原型对象,代码如下:

function Person(){}

Person.prototype = {
    name: 'Nicholas',
    age: '29',
    job: 'Software Engineer',
    sayName: function(){
      console.log(this.name);
    }
}

但是这么写有一个例外:constructor属性不再指向Person了。因为这样写,本质上重写了prototype对象,因此constructor属性也就变成了新的对象的constructor(指向Object构造函数),不再指向Person函数。此时尽管instanceOf操作符还能返回正确结果,但是通过constructor已经无法确定对象的类型了。

var friend = new Person();

console.log(friend instanceof Object);//true
console.log(friend.instanceof Person);//true
console.log(friend.constructor == Person);//false
console.log(friend.constructor == Object);//true

所以如果constructor属性真的很重要的话,可以向下面的方式特意将它设置为适当的值:

function Person(){}

Person.prototype = {
    constructor: Person,
    name: 'Nicholas',
    age: '29',
    job: 'Software Engineer',
    sayName: function(){
      console.log(this.name);
    }
}    

in && hasOwnProperty

如何确认属性是保存在原型中还是保存在实例对象中呢?组合使用inhasOwnProperty

  • in操作符,如果value in object 返回true则表示这个value属性要么能在实例中访问,要么保存在原型中,反正能通过原型链访问到

  • hasOwnProperty只在属性存在于实例中时才返回true

    function hasPrototypeProperty(object, name) {
    return !object.hasOwnProperty && (name in object)
    }

上面这段代码返回true则表示,属性在原型中而不在实例对象中

原型模式的问题

首先,他省略了为构造函数传递参数这个环节,结果所有属性默认情况下都获得了相同的属性值。还有最重要的问题是由其共享的本质导致的。

原型中所有属性被很多实力共享,这种共享对函数很适合,对那些事基本值的属性也还说得过去,然而,对那些包含引用值得属性来说,问题就比较大了:

function Person(){}

Person.prototype = {
    constructor: Person,
    name: 'Nicholas',
    age: '29',
    job: 'Software Engineer',
    friends:['aa', 'bb', 'cc'],
    sayName: function(){
      console.log(this.name);
    }
}

var person1 = new Person();
var person2 = new Person();

person1.friends.push('dd');

console.log(person1.friends);//aa,bb,cc,dd
console.log(person2.friends);//aa,bb,cc,dd
console.log(person1.friends === person2.friends);//true

可见,一个事例修改原型中的某个引用类型属性,其他事例都会受到影响。正是这个原因导致了很少有人单独使用原型模式,于是就有了下文的混合模式。

组合使用原型模式和构造函数模式

组合使用原型模式和构造函数模式是最常见,应用最广泛的创建自定义类型的方式:构造函数模式用来定义实力属性,原型模式用来定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,同时共享着对方法的引用。另外这种混合模式,还支持想构造函数传递参数。

function Person(name, age, job){      
    this.name = name;
    this.age =  age;
    this.job =  job;
    this.friends =['aa', 'bb'];
}

Person.prototype = {
    constructor: Person,
    sayName: function(){
      console.log(this.name);
    }
}

var person1 = new Person("Nicholas","29","Software Engineer");
var person2 = new Person("Grep","27","Doctoer");

person1.friends.push('cc');

console.log(person1.friends);//aa,bb,cc
console.log(person2.friends);//aa,bb
console.log(person1.friends === person2.friends);//false
console.log(person1.sayName === person2.sayName);//true

原文推荐

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容