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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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中使用XML
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php 启动报错如何解决
2014/01/17 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP实现简易图形计算器
2020/08/28 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python与pycharm有何区别
2020/07/01 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
nohup的用法
2012/11/26 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
《盘古开天地》教学反思
2014/02/28 职场文书
大学生实习证明范本
2014/09/19 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server