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 使用 NodeList需要注意的问题
Mar 04 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
JavaScript 异步调用
Oct 25 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 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文件锁定写入实例解析
2014/07/14 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python聊天室实例程序分享
2016/01/05 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python使用xpath实现图片爬取
2020/09/16 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
打架检讨书范文
2015/01/27 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
详解Python requests模块
2021/06/21 Python