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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
php中给js数组赋值方法
Mar 10 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php的扩展写法总结
2019/05/14 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
pandas通过索引进行排序的示例
2018/11/16 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
深入浅析Python中的迭代器
2019/06/04 Python
python和js交互调用的方法
2020/06/23 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
学习委员自我鉴定
2014/01/13 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
美术指导求职信
2014/03/17 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技