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获取checkbox的值并post提交
Jan 14 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
基于vue.js实现的分页
Mar 13 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JS input 数字验证代码
2009/07/30 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
在python中实现对list求和及求积
2018/11/14 Python
Django 多环境配置详解
2019/05/14 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
执行Python程序时模块报错问题
2020/03/26 Python
python实现图像全景拼接
2020/03/27 Python
类如何去实现接口
2013/12/19 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
外国人聘用意向书
2014/04/01 职场文书
入党介绍人评语
2014/05/06 职场文书
授权委托书怎么写
2014/09/25 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js