首页 / 设计模式 / JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧

JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4861字，纯文字阅读大概需要7分钟。

内容图文

JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧

原型模式说明

说明：使用原型实例来拷贝创建新的可定制的对象；新建的对象，不需要知道原对象创建的具体过程；

过程：Prototype => new ProtoExam => clone to new Object;

使用相关代码:

代码如下:

function Prototype() {
this.name = '';
this.age = '';
this.sex = '';
}

Prototype.prototype.userInfo = function() {
return '个人信息, 姓名: '+this.name+', 年龄: '+this.age+', 性别:'+this.sex+'
';
}

现在需要两个或以上的个人信息内容:

代码如下:

var proto = new Prototype();

var person1 = Object.create(proto);

person1.name = '小明';

person1.sex = '男';

person1.age = 35;

person1.userInfo(); 

//

var person2 = Object.create(proto);

person2.name = '小华';

person2.sex = '女';

person2.age = 33;

person2.userInfo();

输出返回:

代码如下:

个人信息, 姓名: 小明, 年龄: 35, 性别: 男

个人信息, 姓名: 小华, 年龄: 33, 性别: 女

原型模式，一般用于抽象结构复杂，但内容组成差不多，抽象内容可定制，新创建只需在原创建对象上稍微修改即可达到需求的情况；

Object.create 使用说明

1>. 定义: 创建一个可指定原型对象的并可以包含可选自定义属性的对象；
2> Object.create(proto [, properties]); 可选，用于配置新对象的属性;

代码如下:

1. proto: 要创建新对象的原型，必须，可为 null; 这个 proto 要是已经创建的[new过]，或对象.prototype 才有价值;
2. properties: 可选，结构为:
{
propField: {
value: 'val'|{}|function(){},
writable: true|false,
enumerable: true|false,
configurable: true|false,
get:function(){return 10},
set:function(value){}
}
}
自定的属性有以下的四种本置属性：
value: 自定义属性值;
writable: 该项值是否可编辑，默认为 false, 当为 true 时，obj.prodField 可赋值；否则只读;
enumerable: 可枚举;
confirurable: 可配置;

还可以包含 set, get 访问器方法；

其中，[set, get] 与 value 和 writable 不能同时出现；

1. 创建原型对象类:

代码如下:

function ProtoClass(){

   this.a = 'ProtoClass';

   this.c = {};

   this.b = function() {

   }

}

创建原型方法:

代码如下:

ProtoClass.prototype.aMethod = function() {

     //this.a;

     //this.b();

　　 return this.a;

}

使用方法

1. 以 ProtoClass.prototype 创建一个对象;

代码如下:

var obj1 = Object.create(ProtoClass.prototype, {

    foo:{value: 'obj1', writable: true}

})

obj1 就具有 ProtoClass 原型方法 aMethod 的方法;

代码如下:

obj1.aMethod();

//就会输出 undefined 方法可访问，ProtoClass 成员无法访问

但是这种方法执行不到 ProtoClass 下 a, b, c 的成员属性:

2. 采用实例化的 ProtoClass 做原型:

代码如下:

var proto = new ProtoClass();

var obj2 = Object.create(proto, {
foo:{value:'obj2'}
});

这样创建的 obj2 就具有 ProtoClass 的所有的成员属性 a, b, c 以及 aMethod 原型方法; 并添加了一个 foo 只读数据属性；

代码如下:

obj2.a; //ProtoClass
obj2.c: //[Object]
obj2.b(); //

obj2.aMethod(); //ProtoClass
obj2.foo; //obj2

3. 子类继承:

代码如下:

function SubClass() {

}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
foo:{value: 'subclass'}
});

SubClass.prototype.subMethod = function() {
return this.a || this.foo;
}

这种方法可以继承到 ProtoClass 的 aMethod 方法，执行;

代码如下:

var func = new SubClass();

func.aMethod() ;//undefined,读不到 ProtoClass 的成员属性,a,b,c

func.subMethod();//subclass

要让 SubClass 能读取到 ProtoClass 的成员属性，SubClass 要改下:

代码如下:

function SubClass()
{
ProtoClass.call(this);
}

//其他代码;

这种方法就可以获取 ProtoClass 的成员属性及原型方法;:

代码如下:

var func = new SubClass();

func.aMethod() ;//ProtoClass

func.subMethod();//ProtoClass

还有一种方法，就是使用实例化的 ProtoClass 对象，做为 SubClass 的原型;

代码如下:

var proto = new ProtoClass();

function SubClass() {
}

SubClass.prototype = Object.create(proto, {
foo:{value: 'subclass'}
});

这样 SubClass 实例化后，就可以获取到 ProtoClass 所有的属性及原型方法，以及创建一个只读数据属性 foo;

代码如下:

var func = new SubClass();

func.foo; //subclass

func.a; //ProtoClass

func.b(); //

func.c; //[Object]

func.aMethod(); //ProtoClass

4. 另外的创建继承方法，跟 Object.create 使用实例化的ProtoClass 做原型效果一样:

代码如下:

function SubClass() {
　　this.foo = 'subclass'; //不过这边可读写
}

SubClass.prototype = new ProtoClass();

Object.create 相关说明

Object.create 用于创建一个新的对象，当为 Object 时 prototype 为 null, 作用与 new Object(); 或 {} 一致;

当为 function 时，作用与 new FunctionName 一样;

代码如下:

//1 Object
var o = {}
//等同于
var o2 = Object.create({});
//两者 constructor 一样;

//-----------------------------------------
function func() {
this.a = 'func';
}
func.prototype.method = function() {
return this.a;
}

但是 newfunc 与 newfunc2 在创建它们的对象的函数引用是不一样的.

newfunc 为 function func() {...}，newfunc2 为 function Function { Native }

代码如下:

Object.create(proto[, propertiesField]):

proto 说明，该值为必须，可以为 null, 如果没设定，将会抛出异常;

proto 为非 null, 即为已实例化的值，即已经 new 过的值；javaScript 中的对象大多有 constructor 属性，这个属性说明此对象是通过哪个函数实例化后的对象；

propertiesField 为可选项，设定新创建对象可能需要的成员属性或方法；

内容总结

以上是互联网集市为您收集整理的JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧全部内容，希望文章能够帮你解决JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/323135.html

来源：【匿名】

【上一篇】JavaScript设计模式之建造者模式介绍_javascript技巧【下一篇】介绍php设计模式中的工厂模式

更多 ►

【JavaScript设计模式之原型模式(Object.create与prototype)介绍_javascript技巧】教程文章相关的互联网学习教程文章

javascript设计模式之解释器模式详解_javascript技巧【图】

神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念：抽象语法树：解释器模式并未解释如何创建一个抽象语法树。它不涉及语法分析。抽象语法树可用一个表驱动的语法分析程序来完成，也可用手写的（通常为递归下降法）语法分析程序创建，或直接client提供。解析器：指的是把描述客户端调用要求...

JavaScript设计模式之单例模式实例_javascript技巧【图】

《Practical Common Lisp》的作者 Peter Seibel 曾说，如果你需要一种模式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不去寻求和总结一种通用的解决方案。不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员，在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。术士和暗影牧师很容易成为一个出色的辅助，而一个背着梅肯满地图飞的敌法就会略显...

JavaScript设计模式之观察者模式（发布者-订阅者模式）_javascript技巧

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.代码如下: div.onclick = function click (){ alert ( ”click ) }只要订阅了div的click事件. 当点击div的时候, function click就会被触发。那么到底什么是观察者模式呢. 先看看生活中的观察者模式。好莱坞有句名言. “不要给我打电话，我会给你打电话”. 这句话就...

JavaScript设计模式之外观模式实例_javascript技巧

外观模式(门面模式)，是一种相对简单而又无处不在的模式。外观模式提供一个高层接口，这个接口使得客户端或子系统更加方便调用。用一段再简单不过的代码来表示：代码如下: var getName = function(){ return ”svenzeng” } var getSex = function(){ return ‘man } 如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用.代码如下: var getUserInfo = function(){ var info = a() + b(); return i...

JavaScript设计模式之策略模式实例_javascript技巧

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。一个小例子就能让我们一目了然。回忆下jquery里的animate方法.代码如下: $( div ).animate( {“left: 200px”}, 1000, ‘linear ); //匀速运动 $( div ).animate( {“left: 200px”}, 1000, ‘cubic ); //三次方的缓动这2句代码都是让div在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装. 再来一个例子. ...

JavaScript设计模式之外观模式介绍_javascript技巧

外观模式说明说明：外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口，使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式，我们经常涉及到的功能，可能需要涉及到几个子接口或子系统，而我们的某个功能，可能只需要这向个多个子接口中的一个或几个组成的顺序封装。如果是业务功能直接对应子接口或子系统的，可能要求开发人员对内部需要相当的了解；你可能需要去了解业务流程是怎么走...

JavaScript设计模式之装饰者模式介绍_javascript技巧

装饰者模式说明说明：通一个类来动态的对另一个类的功能对象进行前或后的修饰，给它辅加一些额外的功能; 这是对一个类对象功能的装饰，装饰的类跟被装饰的类，要求拥有相同的访问接口方法（功能），这在动态面向对象类里，一般以实现同一个接口(interface)来约束实现；装饰类的要有对被装饰类的引用，用于在装饰类的相应方法，调用相应被装饰类的方法，然后对其进行修饰；场景举例:1>. 比如我们生活中的穿衣服，一件衬衣，一件西装...

JavaScript设计模式之抽象工厂模式介绍_javascript技巧

抽象工厂模式说明1. 工厂方法模式的问题: 在工厂方法模式里，创建类都需要通过工厂类，如果要扩展程序，就必须修改工厂类，这违背了闭包原则，对扩展开放，对修改关闭；对于设计有一定的问题。 2. 如何解决：就要用到抽象工厂模式，就是对功能类单独创建工厂类，这样就不必修改之前的代码，又扩展了功能。 3. 工厂模式其实就是对实现同一接口的实现类的统一工厂方式创建调用，但 javascript 没有接口这号东西，所以就去掉这一...

JavaScript设计模式之代理模式介绍_javascript技巧

代理模式说明说明：顾名思义就是用一个类来代替另一个类来执行方法功能，这个模式跟装饰模式有点相似，不一样的是，代理模式是代替客户初始化被代理对象类，而装饰模式采用接口或初装饰者参数引用的方式来执行的。在动态面向对象语言里，代理模式即起到控制修饰被代理类的作用，也对被代理类起到了充分的隐藏保护作用；被代理类只到我们需要时，才被间接初始化调用；场景描述:很常见到的就是租房子的例子，房客要租房子，房东要把房...

JavaScript设计模式之适配器模式介绍_javascript技巧

适配器模式说明说明: 适配器模式，一般是为要使用的接口，不符本应用或本系统使用，而需引入的中间适配层类或对象的情况；场景: 就好比我们买了台手机，买回来后发现，充电线插头是三插头，但家里，只有两插头的口的插座，怎么办？为了方便，也有为能在任何地方都能充上电，就得去买个通用充电适配器; 这样手机才能在自己家里充上电；不然只能放着，或跑到有这个插头的地方充电；实际开发环境下，由于旧的系统，或第三方应用提供...