JS(一)Prototype的使用

C#的类可以有静态方法和属性,可以类名或实例引用,并且是所有实例共享的。

JS中有类方法、对象方法,分别对应C#中的静态方法、实例方法。

此外JS中还有原型方法,通过给一个类的Prototype变量添加一个对象引用,动态的让该类的所有实例拥有属性和方法。

总之,一个类的prototype存储了类的特殊的静态方法和属性,可以动态的指定,并且只能通过类的实例访问这些成员,

以下引用自[飞林沙博客:http://www.cnblogs.com/kym/]

对于Javascript的初学者来说,Prototype是个蛮高深的话题,其实并不尽然。

我说不尽然,意思是说理解Prototype的一般用法很简单。但是真正能做到融会贯通理解Prototype确实是件很难的事情。

今天我就从Prototype的基本开始讲。上文中我讲了原型模式。其实在Javascript中原型也是这个意思。Javascript中对象的原型属性的解释是:返回对象类型原型的引用。这是一个晕人的解释。其实就是指定了一个需要复制的对象。

文字再多也不如代码,上代码,说最简单的,任何类都继承自Object类:

function A()

{    }

A.prototype=new Object();

其实这样就相当于Object对象是A的一个原型,这样就相当于了把Object对象的属性和方法复制到了A上,和原型模式的精髓一样吧!

好,大概了解了prototype的基本用法,我们来看看原型究竟有什么用处。

对于Javascript的初学者来说,Prototype是个蛮高深的话题,其实并不尽然。

我说不尽然,意思是说理解Prototype的一般用法很简单。但是真正能做到融会贯通理解Prototype确实是件很难的事情。

今天我就从Prototype的基本开始讲。上文中我讲了原型模式。其实在Javascript中原型也是这个意思。Javascript中对象的原型属性的解释是:返回对象类型原型的引用。这是一个晕人的解释。其实就是指定了一个需要复制的对象。

文字再多也不如代码,上代码,说最简单的,任何类都继承自Object类:

function A()

{    }

A.prototype=new Object();

其实这样就相当于Object对象是A的一个原型,这样就相当于了把Object对象的属性和方法复制到了A上,和原型模式的精髓一样吧!

好,大概了解了prototype的基本用法,我们来看看原型究竟有什么用处。

最简单的用法,动态扩展类的方法和属性。

function People()

{

this.Jump=function(){

alert("I can jump");

}

}

现在要扩充方法:

People.prototype.Run=function(){

alert("I can run,too");

}

好,测试下:

var p=new People();

p.Jump();

p.Run();

  1. 接下来,顺带讲一下Javascript的方法种类。我个人将Javascript的方法分为三种:

    <1>类方法

    <2>对象方法

    <3>原型方法

    先看代码,后讲区别:

function People(name)

{

this.name=name;

//对象方法

this.Introduce=function(){

alert("My name is "+this.name);

}

}

//类方法

People.Run=function(){

alert("I can run");

}

//原型方法

People.prototype.IntroduceChinese=function(){

alert("我的名字是"+this.name);

}

测试下:

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese();

总结下:

我们用C#来做类别来讲解这三个方法:

类方法其实就是我们讲的静态方法:

如public static void Run(){}

而对象方法其实就是实例方法。

public void Introduce(){}

而原型方法有所不同,由于C#中不允许动态为对象增加方法,因此在C#中并不存在原型方法。原型方法处于C#的静态方法与实例方法之间,通过对象调用,但是存储的内存形式却类似于静态方法,也就是所有实例对象共享同一副本。

(ps:尽量将方法定义为原型方法,原型方法避免了每次调用构造函数时对属性或方法的构造,因此比较节省空间和时间)

  1. p1.IntroduceChinese();创建对象。

    还记得我在上一篇文章里讲的浅复制么?为什么大家都喜欢批量生产?效率是最主要因素。浅复制也一样,我们为什么要浅复制,因为效率高。作为原型模式的Javascript应用,prototype也承担着这样的重任。用prototype来创建对象,要比其他方式快得多。

    看代码例子:

    function People(name,age)

    {

    this.name=name;

    this.age=age;

    }

    var p1=new People("Xuan",22);

    var girls=[ ];

    var GirlPrototype=function(){};

    GirlPrototype.prototype=p1;

    for(var i=0;i<100000;i++)

    {

    girls[i]=new GirlPrototype();

    }

  2. 玩转继承:

    Prototype最大的应用其实还是在于玩转继承,这个在此不讨论,请参加我的另一篇文章:《Javascript玩转继承(二)》

好,基本的应用说完,下面我来说一下prototype的天使和魔鬼两面。

说prototype是天使,是因为以上的几点应用,让Javascript增加了很大的灵活性,尤其原型继承,更是Javascript最多的继承方式。

说他是魔鬼,则是因为下面几方面:

  1. 原型继承的缺陷。请参见《Javascript玩转继承(二)》

  2. 原型其实相当于原型模式中的浅复制,因此也会造成牵一发而动全身的效果。

过于灵活。为什么过于灵活呢?其实这点我是针对第一点来说的,能够动态地添加属性和方法固然是增加了灵活性。可是我们讨论一种情况,100个人同时来开发一个Javascript的项目,很多没经验的人爱上了玩转prototype,一个人往这个类里加一个方法,还面向对象么?当然这只是我的个人之见。如果有异议,欢迎和我讨论。

时间: 2024-08-02 21:22:41

JS(一)Prototype的使用的相关文章

js的prototype扩展的一个例子,模仿C#的StringBuilder功能,数组组合字符串,效率大于+拼凑

function StringBuilder() { this._strings_ = new Array;}StringBuilder.prototype.append = function (str) { this._strings_.push(str);};StringBuilder.prototype.toString = function () { return this._strings_.join("");}; js的prototype扩展的一个例子,模仿C#的Strin

js:深入prototype(上:内存分析)

/** * 以下演示了通过原型的创建方式,使用基于原型的创建可以将属性和方法 * 设置为Person专有的,不能通过window来调用. * 原型是javascript中的一个特殊对象,当一个函数创建之后,会随之就产生一个原型对象 * 当通过这个这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中,就会有一个属性指向原型 */ //第一种状态 function Person(){                        } //第二种状态 Person.prototype.nam

js:深入prototype(下:原型重写)

//当属性和方法特别多时,编写起来不是很方便,可以通过json的格式来编写 //由于原型重写,而且没有通过Person.prototype来指定,此时的constructor不会再指向Person而是指向Object //如果constructor真的比较重要,可以在json中说明原型的指向 function Person(){ } Person.prototype = { //constructor:Person,   //手动指定constructor name:"octopus"

深入理解js的prototype以及prototype的一些应用

上一篇讲了js的prototype概念,在这里回顾一下prototype的定义: prototype是函数的一个属性,并且是函数的原型对象.引用它的必然是函数,这个应该记住. 但是,很奇怪,各位看官,你有没有看过类似下面这样引用prototype的js代码: function func(){ var args = Array.prototype.slice.call(arguments, 1); return args; } 咦???看着上面这行代码,你是不是对prototype只是属于函数产生

JS的prototype和__proto__、constructor

看了JS的prototype和__proto__这篇文章,才感觉很清晰了,对于原型这块,以前经常把这些属性弄不清楚, 明白了之后保存下整理下: prototype: 是函数的一个属性(每个函数都有一个prototype属性) __proto__: 是一个对象拥有的内置属性 (prototype是函数的内置属性,__proto__是对象的内置属性) 二.new 的过程 var t= function(){}; var p = new t(); new的过程拆分成以下三步:(1) var p={};

Js中Prototype、__proto__、Constructor、Object、Function关系介绍

Js中Prototype.__proto__.Constructor.Object.Function关系介绍 一    Prototype.__proto__与Object.Function关系介绍        Function.Object:Js自带的函数对象. prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性). __proto__:每个对象都有一个名为__proto

简单理解js的prototype属性

在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的prototype这个东西吗?你是否也认为prototype是一个object对象的属性呢?是的话,请认真认真看我这篇文章,因为这篇文章会毁灭你的人生三观,呵呵,就是有这么严重,因为本人就是被这个定义给害惨的. 不得不说,看了网上的一些介绍prototype的文章,基本上都说prototype是对象的一

Bom和Dom编程以及js中prototype的详解

一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

深刻理解下js的prototype

参考 http://aralejs.org/class/docs/competitors.html, http://www.iteye.com/topic/248933,http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html 1.使用Dog.prototype.__proto__ ? 1 2 3 4 5 6 7 8 9 10 11 function Animal() {} function Dog() {} //

Js中Prototype、__proto__、Constructor、Object、Function关系介绍 ,JS原型

此文来自:http://www.blogjava.net/heavensay/archive/2013/10/20/405440.html Js中Prototype.__proto__.Constructor.Object.Function关系介绍 一    Prototype.__proto__与Object.Function关系介绍        Function.Object:Js自带的函数对象. prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(