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和JQuery实用代码片段(一)
Apr 07 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
JS ES6异步解决方案
Apr 29 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php数组中删除元素的实现代码
2012/06/22 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python中return如何写
2020/06/18 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
YII2 全局异常处理深入讲解
2021/03/24 PHP
如何掌握自荐信格式呢
2013/11/19 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
财务总经理岗位职责
2014/02/16 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技