原型 prototype

构造函数模式

构造函数中的实例属性在各个实例化对象间是独立的

function Box(name, age) { //构造函数模式

this.name = name;           //实例属性

this.age = age;

this.run = function () {

return this.name + this.age + '运行中...';

};

}

var box1 = new Box('Lee', 100); //new Box()即可

var box2 = new Box('Jack', 200);

  构造函数方式

  构造函数中的实例属性在各个实例化对象间是独立的

构造函数的方法有一些规范:

1.函数名和实例化构造名相同且大写,(PS:非强制,但这么写有助于区分构造函数和

普通函数);

2.通过构造函数创建对象,必须使用new 运算符。

既然通过构造函数可以创建对象,那么这个对象是哪里来的,new Object()在什么地方

执行了?执行的过程如下:

1.当使用了构造函数,并且new 构造函数(),那么就后台执行了new Object();

2.将构造函数的作用域给新对象,(即new Object()创建出的对象),而函数体内的this 就

代表new Object()出来的对象。

3.执行构造函数内的代码;

4.返回新对象(后台直接返回)。

原型模式

原型属性可以被所有的实例对象共享

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是

包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解:prototype 通过

调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所

包含的属性和方法。也就是说,不必在构造函数中定义对象信息,而是可以直接将这些信息

添加到原型中。

function Box() {} //声明一个构造函数

Box.prototype.name = 'Lee'; //在原型里添加属性

Box.prototype.age = 100;

Box.prototype.run = function () { //在原型里添加方法

return this.name + this.age + '运行中...';

};

                                      原型模式方式

                 原型属性可以被所有的实例对象共享

在原型模式声明中,多了两个属性,这两个属性都是创建对象时自动生成的。__proto__

属性是实例指向原型对象的一个指针,它的作用就是指向构造函数的原型属性constructor。

通过这两个属性,就可以访问到原型里的属性和方法了。

原型模式的执行流程:

1.先查找构造函数实例里的属性或方法,如果有,立刻返回;

2.如果构造函数实例里没有,则去它的原型对象里找,如果有,就返回;



为了让属性和方法更好的体现封装的效果,并且减少不必要的输入,原型的创建可以使

用字面量的方式:

function Box() {};

Box.prototype = { //使用字面量的方式

name : 'Lee',

age : 100,

run : function () {

return this.name + this.age + '运行中...';

}

};

使用构造函数创建原型对象和使用字面量创建对象在使用上基本相同,但还是有一些区

别,字面量创建的方式使用constructor 属性不会指向实例,而会指向Object,构造函数创建

的方式则相反。

如果想让字面量方式的constructor 指向实例对象,那么可以这么做:

Box.prototype = {

constructor : Box, //直接强制指向即可

};

PS:字面量方式为什么constructor 会指向Object?因为Box.prototype={};这种写法其实

就是创建了一个新对象。而每创建一个函数,就会同时创建它prototype,这个对象也会自

动获取constructor 属性。所以,新对象的constructor 重写了Box 原来的constructor,因此会

指向新对象,那个新对象没有指定构造函数,那么就默认为Object。

原型的声明是有先后顺序的,所以,重写的原型会切断之前的原型,之前的原型全部被新原型覆盖。


构造函数模式+原型模式

function Box(name, age) { //不共享的使用构造函数

this.name = name;          //实例属性独立

this.age = age;

this. family = ['父亲', '母亲', '妹妹'];

};

Box.prototype = { //共享的使用原型模式

constructor : Box,//原型属性共享

run : function () {

return this.name + this.age + this.family;

}

};

原型模式,不管你是否调用了原型中的共享方法,它都会初始化原型中的方法,并且在

声明一个对象时,构造函数+原型部分让人感觉又很怪异,最好就是把构造函数和原型封装

到一起。为了解决这个问题,我们可以使用动态原型模式。

function Box(name ,age) { //将所有信息封装到函数体内

this.name = name;

this.age = age;

if (typeof this.run != 'function') { //仅在第一次调用的初始化

Box.prototype.run = function () {

return this.name + this.age + '运行中...';

};

}

}

var box = new Box('Lee', 100);

alert(box.run());

当第一次调用构造函数时,run()方法发现不存在,然后初始化原型。当第二次调用,就

不会初始化,并且第二次创建新对象,原型也不会再初始化了。这样及得到了封装,又实现

了原型方法共享,并且属性都保持独立。

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

推荐阅读更多精彩内容