Javascript原型模式总结梳理

  在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样。Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现。在原型编程语言中,类并不是必需的,对象不一定需要由类实例化而来,而是通过克隆另外一个对象来得到。

  原型模式是用来创建对象的一种模式。在以类为中心的语言中,要创建一个对象首先要指定这个对象的类型,然后实例化一个对象。使用原型模式创建对象时不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象。所以在前者中如果要根据一个对象创建多个相同的对象,我们需要先保存这个对象的所有属性信息,然后将属性信息设置到新创建的对象上,而在原型模式中我们只需要使用克隆就能完成同样的功能。

  在某些玄幻小说中经常会出现某些修真大能,以分身的形式游走世间。这个过程很适合原型模式的应用:

function Master(){
    this.blood = 100;
    this.level = 6;
}

var noumenon = new Master();
noumenon.level = 9;

var ektype = Object.create(noumenon);

console.log(ektype);

ES5提供了原生的克隆方法:Object.create,不支持这个方法的浏览器可以使用如下代码:

function clone(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}

var ektype = clone(noumenon);

通过以上代码,我们看到了如何通过原型模式来克隆出一个一模一样的的对象。原型模式的真正意义并非创建一个一模一样的对象,而是提供一种创建对象的方式,Javascript的面向对象机制是基于原型模式的,他的对象系统就是使用原型模式,通过克隆来创建的,克隆是创建一个对象的过程和手段。以继承为例:

function Person(name){
    this.name = name;
}

function Developer(lang){
    this.language = lang;
}

var p = new Person('coder');

Developer.prototype = p;

var dev = new Developer('Javascript');

  基于原型的继承体系,子类的每次实例化都是对其构造函数的prototype属性的克隆。所以每次创建Developer对象,其实都是在对p对象的克隆。

  在Java等以类为中心的面向对象语言中,经常使用new实例化一个对象。但是Javascript是基于原型的面向对象语言,在这里new运算符创建对象的方式与Java中的new运算符并不相同,Javascript中的new运算符也是通过克隆来实例化对象的,克隆的是构造器函数的原型对象,new运算符的作用等同于如下代码:

function Person(name){
    this.name = name;
}

function Developer(lang){
    this.language = lang;
}

var p = new Person('coder');

Developer.prototype = p;

function _new(_Constructor) {
    var that = Object.create(_Constructor.prototype);
    var args = Array.prototype.slice.call(arguments, 1);
    var other = _Constructor.apply(that, args);

    return (typeof other === 'object' && other) ? other : that;
}
_new(Developer, 'JavaScript')

  从这我们也可以看出,Javascript的原型实际上存在着诸多矛盾,它的某些复杂语法看起来就像那些基于类的语言,这掩盖了它的原型机制。所以jQuery中尽量避免使用new运算符来创建对象。

  根据前面所说Javascript中新创建的对象都是基于原有对象的克隆,所以在Javascript中存在一个最原始的对象:Object.prototype,所有对象都是由它克隆而来。

 

  这里所说的克隆是在Javascript原型模式这一大环境下的一种语义表达,在计算机的物理世界中并不存在真正的克隆。所以这里对于克隆应当理解为产生一个拥有__proto__属性指向原对象的对象的过程,原对象成为被克隆的对象,也就是构造函数的prototype对象。

 

  拥有以上共识后,我们可以得到在Javascript中原型编程的基本规则:

  1. Javascript中绝大多数数据都是对象
  2. 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它
  3. 对象会记住它的原型
  4. 如果对象无法响应某个请求,他会把这个请求委托给它自己的原型

 

参考书籍:

《Javascript语言精粹》

《Javascript设计模式与开发实践》

时间: 2024-10-29 14:03:30

Javascript原型模式总结梳理的相关文章

javascript原型模式用法实例详解

  本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了 原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

javascript原型模式用法实例详解_javascript技巧

本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了   原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

javascript 原型模式实现OOP的再研究_javascript技巧

复制代码 代码如下: 复制代码 代码如下: function A() { this.v1 = 10; } A.prototype.print = function() { alert(this.v1); } function B() { } B.prototype = new A(); new B().print(); 运行这段代码输出是10,看起来好像是类B继承了类A的方法print,并产生了正确的输出,实际上的执行流程是在类B生成的对象中,不能直接得到方法print,于是在它的prototy

JavaScript设计模式系列之原型模式

prototype模式通过实例对象指定需要创建的类型,这与factory method模式有本质不同,factory method模式是通过类的继承定义不同子类来达到创建不同类型对象的目的,属于类模式,prototype模式通过调用组合的对象成员生成不同类型的对象实例,属于对象模式. 由于这个特性,prototype具有以下适用场合: · 需要运行时确定实例化的类时,比如动态装载库时 · 避免创建过多子类时.子类太多永远是不受欢迎的,在factory method中我们也提到通过模板或者参数化来

javascript创建对象之原型模式(三)

先上代码: function Human() { }         Human.prototype.name = "成吉思汗";         Human.prototype.sex = "男";         Human.prototype.say = function () {             alert(this.name);         }         var man = new Human();         man.say();

javascript创建对象之函数构造模式和原型模式结合使用(四)

创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. function Human(name, sex) {             this.name = name;             this.sex = sex;             this.getWife=function(){//娶老婆                 if (this.se

javascript创建对象之动态原型模式(五)

动态原型模式是将所有的信息都封装到工造函数中,而构造函数中初始化原型,有保持了同时在使用构造函数和原型的优点. function Human(name, sex) {             this.name = name;             this.sex = sex;             if (typeof this.say != "function") {                 Human.prototype.say = function () {   

Javascript玩转Prototype(一)——先谈C#原型模式

在<Javascript玩转继承(二)>中,我使用了原型继承法来实现Javascript的继承,那原型究竟奥秘何在.在这篇文章中,我就主要针对原型来展开讨论. 抛开Javascript,我们先来看我们熟悉的常规的面向对象语言.在23种设计模式中,大家一定会记得有一种设计模式--原型模式.我们先来看一下结构图: (原图引自:http://terrylee.cnblogs.com/archive/2006/01/16/317896.html) 先来复习一下原型模式:看到这个图,大家一定会注意到这个

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

  本文实例讲述了javascript组合使用构造函数模式和原型模式的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function testPrototype2(){ function Person3(name, age, job){ this.name=name; this.age=age; this.job=job; this.friends =["shelb", "