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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
js实现分割上传大文件
Mar 09 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
浅析vue数据绑定
Jan 17 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
详解vue express启动数据服务
Jul 05 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 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过程中的一些注意点的总结
2013/10/25 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
html读出文本文件内容
2007/01/22 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
Python存取XML的常见方法实例分析
2017/03/21 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python线程join方法原理解析
2020/02/11 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
.net笔试题
2014/03/03 面试题
施工协议书范本
2014/04/22 职场文书
住宅使用说明书
2014/05/09 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
安全先进个人材料
2014/12/29 职场文书
护士自荐信怎么写
2015/03/06 职场文书
教师求职自荐信
2015/03/26 职场文书
名人传读书笔记
2015/06/26 职场文书
教师教育心得体会
2016/01/19 职场文书
2019求职信大礼包
2019/05/15 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
python缺失值的解决方法总结
2021/06/09 Python