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性能优化28条建议你值得借鉴
Feb 16 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
jquery 模板的应用示例
Nov 12 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
理解Javascript的call、apply
Dec 16 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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中慎用双等于(==)的详解
2013/06/06 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Pandas之缺失数据的实现
2021/01/06 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
表扬信格式
2014/01/12 职场文书
论文评语大全
2014/04/29 职场文书
刑事和解协议书范本
2014/11/19 职场文书
党员思想汇报材料
2014/12/19 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
python中opencv实现图片文本倾斜校正
2021/06/11 Python