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实现图片按比例缩放示例
Jul 01 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 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中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
浅谈Vue.js
2017/03/02 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
学生会招新策划书
2014/02/14 职场文书
法律进企业活动方案
2014/03/04 职场文书
师德师风演讲稿
2014/05/05 职场文书
爱护花草树木的标语
2014/06/11 职场文书
学党史心得体会
2014/09/05 职场文书
收费员岗位职责
2015/02/14 职场文书
护士自我推荐信范文
2015/03/24 职场文书
电影地道战观后感
2015/06/04 职场文书
springcloud整合seata
2022/05/20 Java/Android