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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
js实现碰撞检测
Jan 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
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
索趣科技的答案
2007/02/07 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Flask框架配置与调试操作示例
2018/07/23 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
在Python中实现字典反转案例
2020/12/05 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
建筑安全责任书范本
2014/07/24 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫