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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
js使用generator函数同步执行ajax任务
Sep 05 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP数组实例详解
2016/06/26 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python zip()函数使用方法解析
2019/10/31 Python
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
奥巴马演讲稿
2014/01/08 职场文书
18岁生日感言
2014/01/12 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
四年级语文教学反思
2014/02/05 职场文书
中学生运动会口号
2014/06/07 职场文书
水电维修专业推荐信
2014/09/06 职场文书
英语教师个人总结
2015/02/09 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js