javascript创建对象的方法--原型模式
javascript创建对象的方法--原型模式
一、总结
1、原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改
2、原型的使用(prototype关键字):定义模型的时候在属性中加上prototype关键字就好,这里对象用的不是this,prototype关键字添加方式用的是点,例如Peopleobj.prototype.name='喽啰';
3、缺点:构造函数没有参数
二、(Prototype)原型模式
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。可以把那些不变的属性和方法,直接定义在prototype对象上。

- prototype方式定义的方式,函数不会拷贝到每一个实例中,所有的实例共享prototype中的定义,节省了内存。
- Prototype模式的验证方法
- isPrototypeOf()这个方法用来判断,某个proptotype对象和某个实例之间的关系。
- hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
- in运算符in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。
- 对象的constructor属性用于返回创建该对象的构造函数.(注:了解即可)
在JavaScript中,每个具有原型的对象都会自动获得constructor属性。
- 原型方式的问题:
- 构造函数没有参数。使用原型方式,不能通过给构造函数传递参数来初始化属性的值
- 属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享,如果共享的是对象就会造成问题。
三、代码
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创建对象的方法--原型模式的更多相关文章
- javascript创建对象的方法--组合模式
javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...
- javascript创建对象的方法--构造函数模式
javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...
- javascript创建对象的方法--工厂模式(非常好理解)
javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...
- javascript创建对象之动态原型模式(五)
function Human(name, sex) { this.name = name; this.sex = sex; if (typeof this.say != "function& ...
- javascript创建对象的方法--动态原型模式
javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题 2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...
- javascript创建对象之函数构造模式和原型模式结合使用(四)
创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...
- javascript创建对象的方法--基本模式
javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- javascript创建对象的方法总结
Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...
随机推荐
- 题解 P2610 【[ZJOI2012]旅游】
今天模拟赛考了这道题,那就来水一篇题解吧...(话说提高组模拟赛考什么省选题啊??) 这道题要我们求一条线段最多能经过的三角形数量. 回想小学学过的奥数,老师告诉过我们这样一件事:`点无大小 线无粗细 ...
- 网络载入数据和解析JSON格式数据案例之空气质量监測应用
一.创建一个新的项目 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...
- DICOM:Transfer Syntax传输语义之奇葩GE Private TS
背景: 专栏之前对Transfer Syntax(暂定中文翻译为传输语义,8月初博客中提到的DICOM3.0标准中文版开源书籍计划顺利启动.兴许会面临诸多专有名词的翻译工作,欢迎广大博友提意见)进行过 ...
- CCNP路由实验之六 动态路由协议之IS-IS
CCNP路由实验之六动态路由协议之IS-IS 动态路由协议能够自己主动的发现远程网络.仅仅要网络拓扑结构发生了变化.路由器就会相互交换路由信息,不仅能够自己主动获知新添加的网络.还能够在当前网络 ...
- UVa 11849 - CD
题目:给你两个有序序列(每一个序列中元素不同),求两序列中都出现的元素个数. 分析:简单题. 合并排序合并过程. 设置两个指针.指向两序列当前元素.那个元素小指针向后移动.相同大则计数加一,同一时候后 ...
- 1.windows(64位)下使用curl命令
转自:https://www.cnblogs.com/xing901022/p/4652624.html Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景 ...
- vue的钩子函数
1.computed 计算属性 计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 1..aPlus: { get: function ...
- Select 选择算法 - 编程珠玑(续) 笔记
Select 算法 I 编程珠玑(续)介绍的 Quickselect 算法 选择 N 个元素中的第 K 小(大)值,是日常场景中常见的问题,也是经典的算法问题. 选取 N 个元素的数组的中的第 K 小 ...
- Linux下网络服务的安全设置
Linux下网络服务的安全设置 Linux操作系统由于其良好的稳定性.健壮性.高效性和安全性.正在成为各种网络服务的理想平台.各种网络应用在Linux系统上部有性能卓越的应用,例如,提供We ...
- Nginx 代理以及HTTPS (二)
一.HTTPS解析 https 加密 私钥 公钥 http 的握手 是确认网络是连通的. https 的握手 是一个加密的过程 加密图 二. 使用Nginx 部署HTTPS 服务 1.证书生成命令(h ...