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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
Mac下安装vue
Apr 11 Javascript
ES6关于Promise的用法详解
May 07 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 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文件上传表单摘自drupal的代码
2011/02/15 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue 实现的树形菜的实例代码
2018/03/19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python字符串的方法与操作大全
2018/01/30 Python
Python最小二乘法矩阵
2019/01/02 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
有关打架的检讨书
2014/01/25 职场文书
网络技术专业推荐信
2014/02/20 职场文书
业务内勤岗位职责
2014/04/30 职场文书
学前教育专业求职信
2014/09/02 职场文书
机关作风建设心得体会
2014/10/22 职场文书
捐款感谢信
2015/01/20 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Tomcat弱口令复现及利用
2022/05/06 Servers