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 eval函数深入认识
Feb 21 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
jQuery 源码分析笔记
2011/05/25 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
jquery 插件开发备注
2010/08/27 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
应届大学生求职信
2013/12/01 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
更夫岗位责任制
2014/02/11 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
小学教师自我评价
2015/03/04 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python