一、提到原型模式,和构造函数关系密切,先讲一下它

javascript没有类,通过函数来模拟实现类,用new来创建对象,函数内部的this指针来指向调用它的对象。

事例中创建对象myGril,这个对象就获取了构造函数内this指向的所有属性和方法。

var GirlFriend=function (temperament) {
this.temperament=temperament;
this.loseTemper=function(){
return "When angry:"+this.temperament;
}
}
var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper()); //When angry:温柔

二、要是没有this的属性呢

通过new运算符创建的对象,只能访问this指向的属性和方法,实例中,myGirl只能访问temperament,lostTemper

temperament2无法访问。

var GirlFriend=function (temperament) {
this.temperament=temperament;
this.loseTemper=function(){
return "When angry:"+this.temperament;
}
var temperament2=temperament;
}
var myGirl=new GirlFriend("温柔");
console.log(myGirl.temperament2);//undefined

三、讲了一大堆,和原型有什么关系呢?关键是构造函数内的方法,如果新建对象myGirl2 那么就会再创建一个lostTemper方法引用,对象建多了,对内存来说也是一种浪费,因为方法用的都是同一个,不像属性那样,每个对象都不同。这里就用到了原型对象,在构造函数的原型对象中添加一个这个方法,会使所有通过该构造函数创建的对象都具备该方法。

var GirlFriend=function (temperament) {
this.temperament=temperament;
}
GirlFriend.prototype.loseTemper=function(){
return "When angry:"+this.temperament;
}
var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper());

四、刚才看到原型对象上添加一个方法,要是把该构造函数的原型对象改变引用位置,也就是指向一个新对象呢。

下例中两个方法同样都能访问,那我们什么时候可以用呢?一定要确认构造函数的原型对象的所有属性和方法在哪后才能这样做,因为这已经改变了指向,要是有原型对象的其他方法创建过,就失效了,所以很危险。

    var GirlFriend=function (temperament) {
this.temperament=temperament;
} GirlFriend.prototype={
loseTemper:function(){
return "When angry:"+this.temperament;
},
notLoseTemper:function(){
return "When not angry:"+this.temperament;
}
}
var myGirl=new GirlFriend("温柔");
console.log(myGirl.loseTemper());//When angry:温柔
console.log(myGirl.notLoseTemper());//When not angry:温柔

JavaScript原型模式的更多相关文章

  1. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  2. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  3. Javascript:原型模式类继承

    原型模式 每个函数(准确说不是类.对象)都有一个prototype属性,这个属性是一个指针,指向一个对象. 使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法.   1.原型对象 (1)当创 ...

  4. javascript原型模式理解

    传统的面向对象语言中,创建一个对象是通过使用类来创建一个对象的,比如通过类飞行器来创建一个对象,飞机. 而js这种没有类概念的动态设计语言中,创建对象是通过函数来创建的,所以通常也把js称为函数式语言 ...

  5. JavaScript原型模式-理解对象

    一:简述 当初学编程一看到什么什么模式就比较头晕,不过本文我们通过简单的示例代码来说一下js 对象这个话题 ,来看下如何理解这个原型模式. 二:理解对象 1.简单对象 js对象中没有java.C#等类 ...

  6. JavaScript原型模式(prototype)

    1.原型是一个对象,其他对象可以通过它实现属性的继承所有对象在默认的情况下都有一个原型,因为原型的本身也是对象,所以一个类的真正原型是被类的内部[prototype]属性所指出.每个函数都有一个属性叫 ...

  7. JavaScript设计模式-3.原型模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. [设计模式] JavaScript 之 原型模式 : Object.create 与 prototype

    原型模式说明 说明:使用原型实例来 拷贝 创建新的可定制的对象:新建的对象,不需要知道原对象创建的具体过程: 过程:Prototype => new ProtoExam => clone ...

  9. 理解javascript中的原型模式

    一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂 ...

随机推荐

  1. 通过硬件层提高Android动画的性能

    曾有许多人问我为什么在他们开发的应用中,动画的性能表现都很差.对于这类问题,我往往会问他们:你们有尝试过在硬件层解决动画的性能问题么? 我们都知道,在播放动画的过程中View在每一帧动画的显示时重绘自 ...

  2. 使用SparseArray代替HashMap

    HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...

  3. WebView 和Animation冲突

    当有WebView时,可能会出现 动画没有执行过程. 解决方法: child.setLayerType(View.LAYER_TYPE_HARDWARE, null); child.setAnimat ...

  4. 【HDOJ】2159 FATE

    DP+贪心优化. #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXNUM ...

  5. MySQL源码之Thread cache

    MySQL server为每一个connection建立一个thread为其服务,虽然thread create比着fork process代价高,单高并发的情况下,也不可忽略. 所以增加了Threa ...

  6. div居中鼠标悬浮显示下拉列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. bzoj1984

    树链剖分在边上的应用比维护点稍微麻烦一点,是对每条边标号,并且要记录每个点父亲边的编号和重儿子然后注意各种细节线段树上和bzoj1858的维护方法类似,覆盖的优先级高于加具体见程序,完全是为了提升状态 ...

  8. [ZOJ 3623] Battle Ships

    Battle Ships Time Limit: 2 Seconds      Memory Limit: 65536 KB Battle Ships is a new game which is s ...

  9. DevExpress控件学习总结 z

    1.Navigation & Layout 1.1 Bar Manager 如果想在窗体或用户控件(user control)上添加工具条(bars)或弹出菜单(popup menus),我们 ...

  10. ExtJS练手

    Ext.onReady(function () { //给grid添加数据源 var store = new Ext.data.JsonStore({ root: 'rows', totalPrope ...