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 的 prototype问题。
Jan 03 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
python非递归全排列实现方法
2017/04/10 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
社团文化节策划书
2014/02/01 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
2015公司年度工作总结
2015/05/14 职场文书
导游词之湖北武当山
2019/09/23 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android