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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
vue实现拖拽效果
Dec 23 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
前端如何实现动画过渡效果
Feb 05 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
js取得url地址参数实例
2013/02/22 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
实习生自我鉴定范文
2013/12/05 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
网络营销计划书
2015/01/17 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers