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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
解读ES6中class关键字
Nov 20 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
实例讲解vue源码架构
Jan 24 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
Python多线程和队列操作实例
2015/06/21 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python探索之ModelForm代码详解
2017/10/26 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
钳工实习自我鉴定
2013/09/19 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
房产销售经理职责
2013/12/20 职场文书
工厂实习感言
2014/01/14 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
入党政审材料范文
2014/12/24 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python