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

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挖墙脚系列:Android最重要的命令工具ADB】

    原文:[Xamarin挖墙脚系列:Android最重要的命令工具ADB] adb工具提供了很好的基于命令的对系统的控制. 以前说过,安卓的本质是运行在Linux上的虚机系统.在Linux中,对系统进行 ...

  2. Android学习笔记(八)深入分析Service启动、绑定过程

    Service是Android中一个重要的组件,它没有用户界面,可以运行在后太做一些耗时操作.Service可以被其他组件启动,甚至当用户切换到其他应用时,它仍然可以在后台保存运行.Service 是 ...

  3. bzoj 3626 [LNOI2014]LCA(离线处理+树链剖分,线段树)

    3626: [LNOI2014]LCA Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1272  Solved: 451[Submit][Status ...

  4. 我的第一篇Markdown博客

    我的第一篇Markdown博客 这是我第一次用Markdown写博客,发现还是比较好用的,加上Marsedit也支持了Markdown的博客预览,博客园也加了Markdown的格式支持,就更加方便了, ...

  5. jQuery技术内幕预览版.pdf3

    jQuery.fn.init(selector,context,rootjQuery):构造函数 jQuery.fn.init() 负责解析参数 selector 和 context 的类型,并执行相 ...

  6. java 解惑

    java对转义字符没有提供任何特殊处理.编译器在将程序解析成各种符号之前,先将 Unicode 转义字符转换成为它们所表示的字符[JLS 3.2]

  7. MSW下wxWidgets的安装与编译

    教程摘自网上各大博客.贴吧.论坛,结合自己的实践做了一些实质性的修改. 一.安装 首先从http://sourceforge.net/projects/wxwindows/files/2.8.12/w ...

  8. Dynamic Library Design Guidelines

    https://developer.apple.com/library/mac/documentation/DeveloperTools/Conceptual/DynamicLibraries/100 ...

  9. 27 Best Free Eclipse Plug-ins for Java Developer to be Productive

    Eclipse offers an integrated development environment having an extensible plug-in system. This enabl ...

  10. phpDesigner 7.2.5 注册码 更改 语法高亮 主题

    注册码: 用户名:www.xiazaiba.com 序列号:43AB0D432A29EE238CCE0F884D84D8A18498498E98298A98568AD05A0B40 验证码:7S2FF ...