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 相关文章推荐
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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邮件专题
2006/10/09 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Node.js实现文件上传的示例
2017/06/28 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
详解VUE调用本地json的使用方法
2019/05/15 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python实现统计代码行的方法分析
2017/07/12 Python
Python常见字典内建函数用法示例
2018/05/14 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
运动会致辞稿50字
2014/02/04 职场文书
叶问观后感
2015/06/15 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题