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的一种模块模式
Sep 08 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
jquery实现图片轮播器
May 23 jQuery
基于Bootstrap实现城市三级联动
Nov 23 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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学习之PHP变量
2006/10/09 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python实现大文件排序的方法
2015/07/10 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
pandas实现选取特定索引的行
2018/04/20 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python是什么 Python的用处
2020/05/26 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
高中的自我鉴定
2013/12/16 职场文书
校园新闻广播稿
2014/01/10 职场文书
生物学学生自我评价
2014/01/17 职场文书
艺术节主持词
2014/04/02 职场文书
意向协议书范本
2014/04/23 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
国际贸易实训报告
2014/11/05 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
个人德育工作总结
2015/03/05 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server