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检查表单数据是否改变的方法
Jul 30 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
js实现简单的无缝轮播效果
Sep 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
cmd下运行php脚本
2008/11/25 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
理解AngularJs指令
2015/12/10 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python定时任务 sched模块用法实例
2019/11/04 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
创业计划书撰写原则
2014/01/25 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Java线程的6种状态与生命周期
2022/05/11 Java/Android