javascript创建对象的方法--原型模式

一、总结

1、原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改

2、原型的使用(prototype关键字):定义模型的时候在属性中加上prototype关键字就好,这里对象用的不是this,prototype关键字添加方式用的是点,例如Peopleobj.prototype.name='喽啰';

3、缺点:构造函数没有参数

二、(Prototype)原型模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。可以把那些不变的属性和方法,直接定义在prototype对象上。

  1. prototype方式定义的方式,函数不会拷贝到每一个实例中,所有的实例共享prototype中的定义,节省了内存。
  2. Prototype模式的验证方法
    1. isPrototypeOf()这个方法用来判断,某个proptotype对象和某个实例之间的关系。
    2. hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性
    3. in运算符in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。
  3. 对象的constructor属性用于返回创建该对象的构造函数.(注:了解即可)

    在JavaScript中,每个具有原型的对象都会自动获得constructor属性。

  4. 原型方式的问题:
    • 构造函数没有参数。使用原型方式,不能通过给构造函数传递参数来初始化属性的值
    • 属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享,如果共享的是对象就会造成问题。

三、代码

2-5

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
</head>
<body>
<script>
//原型模式
function Peopleobj(){}
Peopleobj.prototype.name='喽啰';
Peopleobj.prototype.weapon='大刀';
Peopleobj.prototype.run=function(){
return this.name+'的武器是'+this.weapon
}
var monster_1=new Peopleobj()
monster_1.job=[]
var monster_2=new Peopleobj()
//alert(monster_1.name+'\n'+monster_1.run())
//alert(monster_2.name+'\n'+monster_2.run())
//alert(monster_1.run)
//alert(monster_2.run)
//alert(monster_1.run==monster_2.run) //说明他们的引用是同一个地址
//这时所有实例的方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。
//alert(Peopleobj.prototype.isPrototypeOf(monster_1));
// alert(monster_1.hasOwnProperty("name"));
// alert(monster_1.hasOwnProperty("job"));//true,是自己独有的属性
alert("jobb" in monster_1);
</script>
</body>
</html>

1、原型模式的使用:第11行,原型模式的使用时通过在模型中添加prototype关键字

2、原型模式模型函数创建:第13行,函数汇总的函数还是采用的这种匿名函数的方式

3、原型模式对象创建自己独有属性:第17行,原型模式对象创建自己独有的属性

4、原型模式解决内存浪费:第23行,原型模式的对象用的是同一个地址

5、isPrototypeOf方法:第25行,原型模式的方法isPrototypeOf来判断proptotype对象和某个实例之间的关系,原型和实例的位置好像和常见的不同

6、hasOwnProperty方法:第26,27行,用hasOwnProperty来判断是否是对象独有属性

7、in方法:第28行,in方法,不明白去看上面的属性方法介绍

2-6

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
</head>
<body>
<script>
//原型模式
function Peopleobj(){}
Peopleobj.prototype.name='喽啰';
Peopleobj.prototype.weapon='大刀';
Peopleobj.prototype.run=function(){
return this.name+'的武器是'+this.weapon
}
var monster_1=new Peopleobj()
var monster_2=new Peopleobj()
//alert(monster_1.constructor)
//这种写法和前面的方式在使用上基本相同,注意是基本
function Monster(){}
Monster.prototype={
constructor: Monster, //此外强制指回Monster
name:'喽啰', //原型字面量方式会将对象的constructor变为Object,
weapon:'大刀',
job:['巡山','打更'],
run:function() {return this.name+'的工作是'+this.job }
}
var monsterA=new Monster()
monsterA.job.push('砍柴')
var monsterB=new Monster()
monsterB.job.push('挑水')
alert(monsterA.job)
alert(monsterB.job)
//alert(monsterA.constructor) </script>
</body>
</html>

1、原型模式的省略prototype写法:第11行,每一个属性或者方法都有prototype,所以很烦,所以有了21到27行的另一种写法

2、另外用匿名函数的写法:第26行,另外一种匿名函数的写法,函数名:function(){}

javascript创建对象的方法--原型模式的更多相关文章

  1. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  2. javascript创建对象的方法--构造函数模式

    javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...

  3. javascript创建对象的方法--工厂模式(非常好理解)

    javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...

  4. javascript创建对象之动态原型模式(五)

    function Human(name, sex) { this.name = name; this.sex = sex; if (typeof this.say != "function& ...

  5. javascript创建对象的方法--动态原型模式

    javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题  2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...

  6. javascript创建对象之函数构造模式和原型模式结合使用(四)

    创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...

  7. javascript创建对象的方法--基本模式

    javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...

  8. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  9. javascript创建对象的方法总结

    Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...

随机推荐

  1. GenIcam标准(五)

    2.8.10.Enumeration, EnumEntry Enumeration节点把一个名称(name)映射到一个索引值(index value),并实现Ienumeration接口.Enumer ...

  2. 题解 CF1027D 【Mouse Hunt】

    这道题原本写了一个很复杂的DFS,然后陷入绝望的调试. 看了一下题解发现自己完全想复杂了. 这里大概就是补充一些题解没有详细解释的代码吧... (小声BB)现在最优解rank4(话说$O2$负优化什么 ...

  3. 题解 P3521 【[POI2011]ROT-Tree Rotations】

    这道题采用权值线段树合并的解法. 首先讲一下解法中出现的两个概念:权值线段树与线段树合并. 所谓权值线段树,可以理解为维护的信息反过来的普通线段树,我个人认为值域线段树这个名字其实要准确一些. 举个例 ...

  4. HttpService解析

    HttpServlet容器响应Web客户请求流程如下: 1)Web客户向Servlet容器发出Http请求: 2)Servlet容器解析Web客户的Http请求: 3)Servlet容器创建一个Htt ...

  5. KM最大匹配 HDU 2255

    KM算法详解+模板 - wenr - 博客园  http://www.cnblogs.com/wenruo/p/5264235.html #include<iostream> #inclu ...

  6. vue.2.0-路由

    vue2.0 路由: http://router.vuejs.org/zh-cn/index.html 基本使用: 1. 布局 <router-link to="/home" ...

  7. poj--2007--Scrambled Polygon(数学几何基础)

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Su ...

  8. Flutter入门

    1.安装SDK 官网下载其最新可用的安装包并解压. 设置环境变量:在.bash_profile文件中写入export PATH=/Users/malk/Documents/flutter/bin:$P ...

  9. 关于springmvc重定向后Cannot create a session after the response has been committed问题

    首先先上代码吧,我在用springmvc进行response.sendRedirect(url);操作后报了Cannot create a session after the response has ...

  10. ZOJ 3175 Number of Containers 分块

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3216 乱搞的...watashi是分块做的...但我并不知道什么是分块...大 ...