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中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
javascript自定义加载loading效果
Sep 15 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python中list初始化方法示例
2016/09/18 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers