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

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. 【Xamarin 跨平台机制原理剖析】

    原文:[Xamarin 跨平台机制原理剖析] [看了请推荐,推荐满100后,将发补丁地址] Xamarin项目从喊口号到现在,好几个年头了,在内地没有火起来,原因无非有三,1.授权费贵 2.贵 3.原 ...

  2. android学习——环境搭建之HelloWorld

    一.在开始Android开发之旅启动之前,首先要搭建环境,然后创建一个简单的HelloWorld.本文的主题如下: 1.1.JDK安装 1.2.Eclipse安装 1.3.Android SDK安装 ...

  3. Oracle由ID生成父ID的函数

    /*表结构*/ CREATE TABLE ly_md ( bh BYTE), mc BYTE), pym BYTE), f_bh BYTE), ch NUMBER, ID NUMBER ); INSE ...

  4. WORD文档的长串数字如何粘贴到excel

    有问题,才有提高 问题描述: 现 word 文档中有好多长长的数字(如下),我需要将它们弄进 Excel 中 直接[复制],[粘贴],结果显示如下: 然后再设置单元格格式中的数字,无论选哪一个都得不到 ...

  5. 制作静态库文件(.a文件)

    制作静态库文件(.a文件) 1.创建静态库工程: 在Xcode中new一个新的project,选择IOS下面的Framework&Library,下面有一个Cocoa Touch Static ...

  6. 使用 Visual Studio 生成通用的 XAML 应用程序 (Windows Phone 和 Windows 通用程序)

    在Build会议上,我们发布了新的版本---Windows Phone 8.1. Windows 8.1 平台.作为开发人员,这意味着您现在可以生成 XAML 和 HTML 的通用程序,并通过分享大量 ...

  7. 系统内存和CPU管理、监控

    本博文的主要内容有 .系统内存管理.监控:vmstat和free -mt .系统CPU管理.监控:sar -u.mpstat.uptime linux系统内存和CPU是在系统运行的过程中不断消耗的资源 ...

  8. Yii框架中ActiveRecord使用Relations

    参考文章: http://blog.csdn.net/yjj1s/article/details/6885276 http://www.gowhich.com/blog/38 http://www.c ...

  9. zoj 3819 Average Score

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...

  10. getaccesstoken方法

    通过appid和appsecret获取access_token的定义函数 这里用的是memcache缓存存储用户信息7000秒 <?php function getAccessToken($ap ...