JS中多种方式创建对象详解


Posted in Javascript onMarch 22, 2016

1.内置对象创建

var girl=new Object(); 
  girl.name='hxl'; 
  console.log(typeof girl);

2.工厂模式,寄生构造函数模式

function Person(name){ 
    var p=new Object();//内部进行实例化 
    p.name=name; 
    p.say=function(){ 
      console.log('my name is '+ p.name); 
    } 
    return p;//注:一定要返回 
} 
var girl=Person('haoxioli'); 
girl.say();

3.构造函数创建

var Product=function(name){ 
    this.name=name; 
    this.buy=function(){ 
      console.log('我衣服的牌子是'+this.name); 
    } 
} 
  var pro=new Product('真维斯'); 
  pro.buy();

4.原型创建,缺点:实例中的每个属性有可能会不一样

var Role=function(){} 
  Role.prototype.name={nickName:'昵称'}; 
  var boy=new Role(); 
  boy.name.nickName='刘晓兵'; 
  console.log(boy.name.nickName);//刘晓兵 
  var girl=new Role(); 
  girl.name.nickName='郝晓利'; 
  console.log(boy.name.nickName);//郝晓利,因为实例对象可以修改原型中的引用对象的值 
  console.log(girl.name.nickName);//郝晓利

5.混合模式:原型+构造,可以把不让实例修改的属性放到构造函数中,可以修改的放原型中

var Role=function(){ 
    this.name={nickName:'aaa'}; 
  } 
  Role.prototype.age=30; 
  var boy=new Role(); 
  boy.name.nickName='boy'; 
  console.log(boy.name.nickName);//boy 
  var girl=new Role(); 
  girl.name.nickName='girl'; 
  console.log(boy.name.nickName);//boy,实例不会修改构造函数中的值 
  console.log(girl.name.nickName);//girl

6.字面量形式

var cat={ 
    name:'lucy', 
    age:3, 
    sex:'母'
  };//将对象转换成字符串 
  console.log(JSON.stringify(cat));//{"name":"lucy","age":3,"sex":"母"} 
  var dog='{"name":"john","sex":"公"}'; 
  console.log(JSON.parse(dog).name);//将字符串转为对象

7.拷贝模式

function extend(tar,source){ 
    for(var i in source){ 
      tar[i]=source[i]; 
    } 
    return tar; 
  } 
  var boy={name:'醉侠客',age:20}; 
  var person=extend({},boy); 
  console.log(person.name);

8.第三方框架

//先引入包 
<script src='js/base2.js'></script> 
//base2框架,Base.extend及constructor都是固定用法 
  var Animal=Base.extend({ 
    constructor:function(name){ 
      this.name=name; 
    }, 
    say:function(meg){ 
      console.log(this.name+":"+meg); 
    } 
  }); 
  new Animal('lily').say('fish');

另一个第三方框架

<script src='js/simplejavascriptinheritance.js'></script> 
//simplejavascriptinheritance框架,Class.extend及init都是固定用法 
  var Person=Class.extend({ 
    init:function(name){ 
      this.name=name; 
    } 
  }); 
  var p=new Person(); 
  p.name='over'; 
  console.log(p.name);

以上这篇JS中多种方式创建对象详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
动态添加js事件实现代码
Mar 12 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
基于jquery实现无限级树形菜单
Mar 22 #Javascript
javascript的几种继承方法介绍
Mar 22 #Javascript
基于javascript实现文字无缝滚动效果
Mar 22 #Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 #Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 #Javascript
jQuery toggle 代替方法
Mar 22 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
动态添加js事件实现代码
2009/03/12 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python书籍信息爬虫实例
2018/03/19 Python
python3.x实现发送邮件功能
2018/05/22 Python
django url到views参数传递的实例
2019/07/19 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
应急管理培训方案
2014/06/12 职场文书
集体生日活动方案
2014/08/18 职场文书
世界遗产的导游词
2015/02/13 职场文书