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 相关文章推荐
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
在小程序中推送模板消息的实现方法
Jul 22 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
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
python交互式图形编程实例(二)
2017/11/17 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
业务部经理岗位职责
2014/01/04 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
市场督导岗位职责
2015/04/10 职场文书
遗失证明范文
2015/06/19 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
亲情作文之母爱
2019/09/25 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL