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 相关文章推荐
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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脚本的10个技巧(6)
2006/10/09 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP count()函数讲解
2019/02/03 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
python图片合成的示例
2020/11/09 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
校三好学生主要事迹
2014/01/11 职场文书
大学活动总结格式
2014/04/29 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS