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数组使用调用方法汇总
Dec 08 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 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
php页面缓存ob系列函数介绍
2012/10/18 PHP
PHP重定向的3种方式
2013/03/07 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
js 函数性能比较方法
2020/08/24 Javascript
python数据处理实战(必看篇)
2017/06/11 Python
Django实现快速分页的方法实例
2017/10/22 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
装修五一活动策划案
2014/01/23 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
python基础之爬虫入门
2021/05/10 Python