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事件列表解说
Dec 22 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
浅谈js中的bind
Mar 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
如何学习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
COM in PHP (winows only)
2006/10/09 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
初识Laravel
2014/10/30 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
原生js实现验证码功能
2017/03/16 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python实现爬虫下载美女图片
2015/07/14 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python的turtle库使用详解
2019/05/10 Python
pip install命令安装扩展库整理
2021/03/02 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
理工大学毕业生自荐信范文
2014/02/22 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
新闻人物通讯稿
2014/10/09 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题