js创建对象的几种方式
2018-01-09 00:00
627 查看
1.通过"字面量"创建
var person={};//空对象 var person={//将成员信息写到{}中,并赋值给一个person变量,此时person变量就是一个对象 name:"离歌", age:"20", say:function(){ console.log("你好!"); } }
我们还可以给对象动态添加成员信息
①对象[成员名称]=值;或 ②对象.成员名称=值;
本人比较推荐①这种方式,假如对象中含有“first-name”这种带有“-”连字符的属性时,②这种方式就会出现问题
获取对象的成员信息
①对象[成员名称] 或 ②对象.成员名称 //推荐方式①,理由如上
2.通过"构造函数"创建
与工厂模式相比无需在函数内创建对象,而是用this代替
无需明确return返回值
//方法: var 变量名=new 函数名(); //例子: var person=new Person();//构造函数
通过该方法创建对象时,会自动执行该函数
<script> $(document).ready(function(){ function Person(){ this.name="www"; this.age="20"; this.say=function(){ console.log("拥有会说话的技能"); } console.log("我是一个人----"); } var person=new Person();//输出我是一个人---- }); </script>
3.通过object方式创建
//方法: var 变量名=new Object(); //例子: var person=new Object();//通过object方式创建
<script> $(document).ready(function(){ var person=new Object(); person.name="李四"; person.age="20"; person.say=function(){ console.log("我拥有说话的行为------"); }; person.say();//输出我拥有说话的行为------ }); </script>
4.工厂模式
在函数中定义对象,并定义对象的各种属性(包括属性和方法)引用对象的时候用的是=函数名()而不是=new 函数名()
在函数的最后返回对象
//方法: function 函数名(){ var child=new Object(); return child; } var 变量=函数名(); //例子: function Person(){ var child=new Object(); child.name="李四"; child.age="20"; child.say=function(){ console.log("我具备说话的能力----"); } return child; } var person=Person(); person.say();//我具备说话的能力----
把上面例子重构下
//把方法属性提取出来,为了避免重复创建该方法 function say(){ console.log("我具备说话的能力----"); } function Person(){ var child=new Object(); child.name="李四"; child.age="20"; child.say=say; return child; } var person=Person(); person.say();//我具备说话的能力----
5.原型模式
只创建一个空函数,里面不放任何内容利用prototype属性,对函数的属性进行绑定
调用的时候new 函数名
//方法: function 函数名(){ } 函数名.prototype.name="李四"; 函数名.prototype.age="20"; 函数名.prototype.say=function(){ console.log("我是一个会说话的人---"); } var person=new 函数名(); //例子: function Person(){ } Person.prototype.name="李四"; Person.prototype.age="20"; Person.say=function(){ console.log("我是一个会说话的人---"); } var person=new Person(); person.say();//我是一个会说话的人---
6.混搭(原型模式+构造函数)
函数中定义属性函数外结合prototype属性定义方法
调用时使用new 函数名()
//方法: function 函数名(){ this.name="李四"; this.age="20"; } 函数名.prototype.say=function(){ console.log("我具备这项能力-----"); } var person=new 函数名(); person.say(); //例子: function Person(){ this.name="李四"; this.age="20"; } Person.prototype.say=function(){ console.log("我具备这项能力-----"); } var person=new Person(); person.say();//我具备这项能力-----
相关文章推荐
- js创建对象的几种方式
- js创建对象的几种方式
- JS对象创建的几种方式整理
- 对JS关于对象创建的几种方式的整理
- JS创建对象的几种方式
- js中创建对象的几种方式
- JS创建对象的几种方式
- js创建对象几种方式的优缺点对比
- js创建对象的几种方式
- js创建对象几种方式
- js创建对象的几种常用方式
- javascript学习(十五):js中对象的常用的几种创建方式
- JS创建对象和获取对象属性的几种方式
- JS面向对象之常见创建对象的几种方式
- JS面向对象二:js对象的几种创建方式
- js中创建对象的几种方式示例介绍
- JS创建对象的几种方式
- JS创建对象的几种方式
- JS创建对象的几种方式
- js创建对象的几种常用方式小结(推荐)