javascript中创建对象的几种方法总结


Posted in Javascript onNovember 01, 2013

前言:

随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展......”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。

越来越多的人开始深入研究和使用javascript,当然,企业对开发者的要求也越来越高。就拿自己的经历来讲,零几年的时候,我能拿javascript写一些页面UI效果,做网站的表单验证等操作,当时觉得已经很酷了。但是换到现在,如果连XMLHttpRequest、JSON是什么都不知道,连javascript中的面向对象/基于对象编程都不了解,还敢称自己是优秀的web程序员吗?(关注前沿技术的朋友,一定了解node.js、MongoDB,这都离不开javascript。)

javascript的灵活性,让人又爱又恨。典型的入门简单,精通很难。理解javascript OOP/基于对象的编程,是判断程序员javascript水平的分水岭。而javascript 基于对象编程中,最基本的是“创建对象”,往往让很多熟悉其他面向语言(Java、C#、C++)的程序员觉得似懂非懂或者难以适应。所以,本文首先将向大家介绍,javascript 中常见的创建对象的几种方式。

1. 简单对象的创建 使用对象字面量的方式{}  创建一个对象(最简单,好理解,推荐使用)

var Cat  = {};//JSON
 Cat.name="kity";//添加属性并赋值
 Cat.age=2;
 Cat.sayHello=function(){
  alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性,也可以使用HashMap的方式访问
 }
 Cat.sayHello();//调用对象的(方法)函数

2.用function(函数)来模拟class (无参构造函数)

2.1 创建一个对象,相当于new一个类的实例

function Person(){
}
var personOne=new Person();//定义一个function,如果有new关键字去"实例化",那么该function可以看作是一个类
personOne.name="dylan";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name+" is coding now...");
}
personOne.work();

2.2 可以使用有参构造函数来实现,这样定义更方便,扩展性更强(推荐使用)
function Pet(name,age,hobby){
   this.name=name;//this作用域:当前对象
   this.age=age;
   this.hobby=hobby;
   this.eat=function(){
      alert("我叫"+this.name+",我喜欢"+this.hobby+",也是个吃货");
   }
}
var maidou =new Pet("麦兜",5,"睡觉");//实例化/创建对象
 maidou.eat();//调用eat方法(函数)

3.使用工厂方式来创建(Object关键字)
var wcDog =new Object();
 wcDog.name="旺财";
 wcDog.age=3;
 wcDog.work=function(){
   alert("我是"+wcDog.name+",汪汪汪......");
 }
 wcDog.work();

4.使用原型对象的方式  prototype关键字
function Dog(){ }
 Dog.prototype.name="旺财";
 Dog.prototype.eat=function(){
 alert(this.name+"是个吃货");
 }
 var wangcai =new Dog();
 wangcai.eat();

5.混合模式(原型和构造函数)
function Car(name,price){
  this.name=name;
  this.price=price; 
}
 Car.prototype.sell=function(){
   alert("我是"+this.name+",我现在卖"+this.price+"万元");
  }
var camry =new Car("凯美瑞",27);
camry.sell();

6.动态原型的方式(可以看作是混合模式的一种特例)
function Car(name,price){
  this.name=name;
  this.price=price; 
  if(typeof Car.sell=="undefined"){
   Car.prototype.sell=function(){
    alert("我是"+this.name+",我现在卖"+this.price+"万元");
   }
 Car.sell=true;
  }
}
var camry =new Car("凯美瑞",27);
camry.sell();

以上几种,是javascript中最常用的创建对象的方式。初学者看到后,可能会晕掉,甚至会觉得担心。其实完全不用担心,这些种方式,只需要掌握一两种,对其他的几种只需要理解就好了。这正是javascript的灵活性。每种方式必定都有其优缺点,因此没有固定的推荐,选择自己最容易理解和掌握的方式即可。况且,每个人的代码风格可能都不同。将来你可能需要去研究jQuery的源码,或者参照别的插件去改写、去开发属于自己的插件,都需要去理解别人的代码风格。而这些类库、插件,都是建立在面向对象/基于对象的基础之上的。
Javascript 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
如何学习Javascript入门指导
Nov 01 #Javascript
js动态设置鼠标事件示例代码
Oct 30 #Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 #Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 #Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 #Javascript
javascript实现的DES加密示例
Oct 30 #Javascript
js onload处理html页面加载之后的事件
Oct 30 #Javascript
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP PDO函数库详解
2010/04/27 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
Symfony核心类概述
2016/03/17 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
几种响应式文字详解
2017/05/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
React实现全选功能
2020/08/25 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python删除过期文件的方法
2015/05/29 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
基于python绘制科赫雪花
2018/06/22 Python
详解django.contirb.auth-认证
2018/07/16 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python对常见数据类型的遍历解析
2019/08/27 Python
浅析Python的命名空间与作用域
2020/11/25 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
初中生物教学反思
2014/01/10 职场文书
护士思想汇报
2014/01/12 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
校园运动会广播稿
2015/08/19 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers