JavaScript创建对象(三)——原型模式-阿里云开发者社区

开发者社区> bob1900> 正文

JavaScript创建对象(三)——原型模式

简介: 在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题。本篇文章就来讨论一下该问题的解决方案——原型模式。
+关注继续查看

在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题。本篇文章就来讨论一下该问题的解决方案——原型模式。

首先我们来看下什么是原型。我们在创建一个函数时,这个函数会包含一个属性prototype,这个属性是一个指针,它指向一个对象——该函数的原型对象,这就是原型,它包含了该函数类型的所有实例可共享的属性和方法,见下面示意图:

如图所示,声明了一个函数Person。在JavaScript中,一个函数被声明的同时就具有了一些属性,其中有一个叫做prototype,它指向了该函数的原型对象,即上述示例中的Person Prototype。同时,这个原型对象有一个叫做constructor的属性反过来又指向了该函数对象。

当我们创建一个函数的实例时,例如上面的var personObj = new Person('张三', 12);,这个实例也会有一个属性指向该函数的原型对象,在Chrome的开发工具中显示为__proto__

上面我们说原型的属性可以被该函数类型的所有实例所共享,那具体是怎么实现呢?看下面的示例:

function Person(){
}

//给原型添加自定义属性和方法
Person.prototype.name = '张三'; 
Person.prototype.sayName = function(){
    console.log(this.name);
}

var p1 = new Person();

//给p1添加age属性
p1.age = 18;
console.log(p1.name);//张三
console.log(p1.age);//18
p1.sayName();//张三

var p2 = new Person();
console.log(p2.name);//张三
console.log(p2.age);//undefined
p2.sayName();//张三

在上面的代码中,我们并没有给实例添加name属性和sayName方法,但是依然可以通过实例调用,貌似实例天生就具有了原型的属性和方法,其实不是的,下面是在Chrome的开发工具中看到的内容:

我们看到,p1Person类型的,我们给p1设置了age属性,这里也能看到age18。另外我们看到p1有个__proto__属性,这个就是我们在原型示意图中说的指向原型对象的属性。

代码读取对象实例某个属性的时候会执行一次搜索,首先搜索对象实例,如果搜索到了就返回,如果没有则会继续搜索__proto__指向的原型对象,搜索到了就返回。所以上面例子中p1.age是搜索到了p1age属性返回了,p1.name是搜索到Person Prototypename返回了,p2.agePerson Prototype中也没搜到,于是返回了undefined。这就是实例对象共享原型属性的原理。

除了上面的写法,原型还有一种更简单的定义方式,就是用一个包含所有属性和方法的对象字面量来重写整个原型对象,这样避免了每当给原型添加一个属性就要书写一遍Person.prototype的繁琐,同时从视觉上看也更好地封装了原型的功能,如下代码所示:

function Person{
}
Person.prototype = {
    constructor: Person,
    name: '张三',
    age: 18,
    job: 'JavaScript',
    sayName: function(){
        console.log(this.name);
    }
}

现在回到文章一开始提出的相同功能的函数定义多次的问题,因为函数原型的属性和方法可以由所有实例所共享,所以只要在原型中定义一次,所有实例就都可以使用,这样就完美解决了构造函数模式的问题。

总结一下,与构造函数模式相比:

  1. 原型模式不必在构造函数中定义属性和方法,而是直接定义在原型中。
  2. 这些属性和方法被所有实例共享。

原型模式虽然好用,但也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。其次,最大的问题是由原型的共享本性带来的,下面来分析一下原型的共享问题。

通过共享,我们解决了构造函数模式相同功能的函数定义多次的问题,所以共享对于函数是有好处的。对于基本类型的属性,如上面的nameage,因为属性的搜索机制是从实例到原型,所以可以通过给实例添加一个同名的属性,屏蔽掉原型中相应的属性,问题也不大。然而,对于引用类型的数据来说,问题就比较严重了。来看下面的示例:

function Person(){
}
Person.prototype = {
    constructor: Person,
    name: '张三',
    age: 18,
    job: 'JavaScript',
    friends: ['小明', '小刚'],
    sayName: function(){
        console.log(this.name);
    }
}

var p1 = new Person();
var p2 = new Person();
p2.name = '李四';

p1.friends.push('小红');//张三交了个女朋友小红
console.log(p1.friends);//["小明", "小刚", "小红"]
console.log(p2.friends);//["小明", "小刚", "小红"],我擦,小红怎么也成了李四的女朋友
console.log(p1.friends == p2.friends);//true

如上所示,Person.prototype包含了一个引用类型,数组friends,其中friends只是一个指针,['小明', '小刚']才是真正的对象。通过p1.friends修改了这个数组,因为共享的问题,p2.friends访问的也是同一个数组。假如我们的初衷就是共享一个数组,那么也没问题。但是多数情况下应该是不想共享的场景。比如这里,张三新交了一个女朋友小红,结果小红同时也是李四的女朋友,是张三有这癖好?是小红劈腿?还是人家张三只是单纯地交了个女朋友,被你搞得复杂了?这个说不清,既然说不清,那么程序就有问题。所以很少有人单独使用原型模式,那么这个问题怎么解决呢?办法还是有的,那就是组合使用构造函数模式和原型模式,这个实现也很简单,但为了区分原型模式,后面将会单独列一篇文章。

本文参考《JavaScript高级程序设计(第3版)》,关于原型模式的其他特点读者可以查阅第6.2.3章节,里面有详细的说明。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
以百度天气预报查询API 服务为例,创建Jmeter JavaSampler请求范例
最近在整理性能测试的一些入门文章,给同事们分享,介绍API 接口自动化和性能测试入门。 下面将以百度天气预报查询API 服务为例,创建Java API 请求范例。 1. API 服务信息 参考文档:https://blog.
2308 0
从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载。
822 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
958 0
实例:使用纹理对象创建Sprite对象
<p><span style="font-size:14px;">精灵类是Sprite,它的类图如下图所示:</span></p> <p style="text-align: center;"><span style="font-size:14px;"><img src="http://img.blog.csdn.net/20140516181640234" alt=""><br></span
1218 0
JavaScript动态创建DOM(七)
JavaScript动态创建DOM(七)
35 0
创建SinaSAE云账号创建和发布基于SVN代码管理的PHP空工程
1、使用Sina微博账号登录,进入【新浪云控制台】 2、选择【云应用SAE】界面,选择【创建新应用】 3、点击【继续创建】,进入应用信息编辑界面     依次编辑“二级域名”“应用程序名”,再点【运行环境】中的【PHP空应用】,再点左下角的【创建应用】完成应用创建。
846 0
JavaScript动态创建DOM(七)
JavaScript动态创建DOM(七)
35 0
+关注
7
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载