微信扫一扫打赏支持

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

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

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9 //原型模式
10   function Peopleobj(){}
11   Peopleobj.prototype.name='喽啰';
12   Peopleobj.prototype.weapon='大刀';
13   Peopleobj.prototype.run=function(){
14       return this.name+'的武器是'+this.weapon 
15   }
16     var monster_1=new Peopleobj()
17     monster_1.job=[]
18     var monster_2=new Peopleobj()
19     //alert(monster_1.name+'\n'+monster_1.run())
20     //alert(monster_2.name+'\n'+monster_2.run())
21     //alert(monster_1.run)
22     //alert(monster_2.run)
23     //alert(monster_1.run==monster_2.run) //说明他们的引用是同一个地址
24     //这时所有实例的方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。
25     //alert(Peopleobj.prototype.isPrototypeOf(monster_1));
26     // alert(monster_1.hasOwnProperty("name"));
27     // alert(monster_1.hasOwnProperty("job"));//true，是自己独有的属性
28     alert("jobb" in monster_1);
29   </script>
30 </body>
31 </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

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6 </head>
 7 <body>
 8   <script>
 9 //原型模式
10   function Peopleobj(){}
11   Peopleobj.prototype.name='喽啰';
12   Peopleobj.prototype.weapon='大刀';
13   Peopleobj.prototype.run=function(){
14       return this.name+'的武器是'+this.weapon 
15   }
16   var monster_1=new Peopleobj()
17   var monster_2=new Peopleobj()
18   //alert(monster_1.constructor)
19 //这种写法和前面的方式在使用上基本相同，注意是基本
20   function Monster(){} 
21   Monster.prototype={
22       constructor: Monster, //此外强制指回Monster
23       name:'喽啰', //原型字面量方式会将对象的constructor变为Object，
24       weapon:'大刀',
25       job:['巡山','打更'],
26       run:function() {return this.name+'的工作是'+this.job }
27   }
28     var monsterA=new Monster()
29     monsterA.job.push('砍柴')
30     var monsterB=new Monster()
31     monsterB.job.push('挑水')
32     alert(monsterA.job)
33     alert(monsterB.job)
34     //alert(monsterA.constructor)
35 
36 
37   </script>
38 </body>
39 </html>

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

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

 

posted @ 2018-05-04 12:08  范仁义  阅读(420)  评论(0)  编辑  收藏  举报