Js面向对象编程
Js面向对象编程
1. 什么是面向对象编程?
我也不说不清楚什么是面向对象,反正就那么回事吧。
编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等
2. Js如何定义一个对象
一般变量的定义方法
var name = '小明'; var email = 'xiaoming@chinaedu.net'; var website = 'http://chinaedu.net'; |
写成对象的方式:
var xiaoming = { name : '小明', email : 'xiaoming@chinaedu.net', website : 'http://chinaedu.net' } |
访问属性的方式
xiaoming.name xiaoming['name'] |
追加属性
xiaoming.sex = '男'; |
给对象定义方法
var xiaoming = { name : '小明', email : 'xiaoming@chinaedu.net', website : 'http://chinaedu.net', sayHello : function(){ alert(this.name + ',你好!'); } } // 再追加一些属性和方法 xiaoming.birthday = '2005-09-23'; xiaoming.eat = function(){ alert(this.name + ',你妈叫你回家吃饭!'); }; |
移除属性的方法
delete xiaoming.sex |
检查对象是否存在某个属性
if('sex' in xiaoming){ alert("true"); } |
js对象的其实没有私有属性的,他的属性都是公有的。
一般对属性名前加_表示私有属性。
3. 对象的继承
我对继承的简单理解:子对象拥有父对象的属性,并可以对父对象的属性进行覆盖或者扩展。
第一种做法,直接把子对象的属性copy给父对象里,生成新的对象就是继承的效果了。
实现方法
function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; } |
4. js中如何定义一个类?
定义的function就是一个构造方法也就是说是定义了一个类;用这个方法可以new新对象出来。
function Person(name, age){ this.name = name; this.age = age; this.showInfo = function(){ alert(this.name + this.age + "岁"); } } Person p1 = new Person('小明', 17); |
5. 类的静态属性及方法
严格来说,ECMAScript 并没有静态作用域。不过,它可以给构造函数提供属性和方法。还记得吗,构造函数只是函数。函数是对象,对象可以有属性和方法。
Person.newOrder = 0; Person.newOrder = function(){ return Person.newOrder ++; } |
6. 类的继承
对象冒充
function Rect(width, height){ this.width = width; this.height = height; this.area = function(){return this.width*this.height;}; } function MyRect(width, height, name){ // this.newMethod = Rect; // this.newMethod(width,height); // delete this.newMethod; Rect.call(this,width,height);// Rect.apply(this, arguments); this.name = name; this.show = function(){ alert(this.name+" with area:"+this.area()); } } |
原型链(prototype chaining)
function Rect(){ } Rect.prototype = { width:10, height : 10, area : function(){return this.width*this.height;} }; function MyRect(name){ this.name = name; this.show = function(){ alert(this.name + " with area:" + this.area()); } } MyRect.prototype = new Rect(); |
混合型
function Rect(width,height){ this.width = width; this.height = height; } Rect.prototype = { area : function(){return this.width*this.height;} }; function MyRect(name, width, height){ Rect.call(this, width, height); this.show = function(){ alert(this.name + " with area:" + this.area()); } } MyRect.prototype = new Rect(); |
7. 可变参数
Js的方法没有重载的概念,但是他的方法参数是可变的。你可传n多参数,只看方法名,方法名相同就认为是一个方法。同名的方法只会覆盖之前的方法。
var Rect = function(){}; Rect.prototype = { _width : 5, _height : 10, width : function(width) { if (arguments.length > 0) { this._width = width; return this; } return this._width; }, height : function(height) { if (arguments.length > 0) { this._height = height; return this; } return this._height; } } var r1=new Rect(); r1.width(30).height(45); alert(r1.width() + "||" + r1.height()); |
8. 命名空间
定义一个edu.fn的命名空间
if (typeof Edu == 'undefined') { var Edu = {}; } if (typeof Edu.fn == 'undefined') { Edu.fn = {}; } (function($) { Edu.fn.core = { } })(jQuery); |
工具方法
function namespace(ns) { if (!ns) return; var nsArr = ns.split('.'); var root = window[nsArr[0]] || (window[nsArr[0]] = {}); for ( var i = 1; i < nsArr.length; i++) { root = root[nsArr[i]] || (root[nsArr[i]] = {}); } return root; } namespace("Edu.fn"); Edu.fn.add = function(a, b) { return a + b; } alert(Edu.fn.add(1, 2)); |
9. 编程常用的模板
针对一些工具类,或者全局只需要存在一个对象的写法
;var YourObj = null; (function($) { YourObj = { width:10, show:function(){} } })(jQuery); |
说明:前后加分号只是为了js代码合并压缩的时候保证不会影响别人的代码以及自己的代码。这里使用了js闭包的方式。把对象定义在外边的好处是eclipse的outline可以方便的显示对象的属性和方法。
类模板
; var YourClass = null; (function($) { YourClass = function(options) { this.settings = { width : 5, height : 5 };// 定义一些默认的属性 $.extend(true, this.settings, options); }; YourClass.prototype = { width : 10, name : '', show : function() { alert(this.name + ",width:" + width); } } })(jQuery); |
10. 常见的一些js用法
简化if语句
a?(语句):(语句)
a=arg||’0’;
11. js调试
现代浏览器一般都支持console.log(msg),要比alert方便,alert会阻断程序。
【参考资料】
http://www.w3school.com.cn/js/pro_js_object_defining.asp
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
http://coolshell.cn/articles/6441.html
本文为作者原创,转载请注明出处,与你分享我的快乐
http://www.cnblogs.com/weirhp
Js面向对象编程的更多相关文章
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- js原生设计模式——3简单工厂模式\js面向对象编程实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- JS面向对象编程(进阶理解)
JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- js面向对象编程 ---- 系列教程
原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- JS面向对象编程,对象,属性,方法。
document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...
- js面向对象编程(第2版)——js继承多种方式
附带书籍地址: js面向对象编程(第2版)
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- cralwer_爬虫代理中心的简要设计
代理中心: 简单讲: 精细化控制限制资源的使用,保证有限资源的充分利用及有效性.支持动态增减,实时更新. 需求 rest api提供请求输入与输出 客户端使用代理心跳接收,用于更新代理的使用次数,被占 ...
- LogMaster4Net
使用LogMaster4Net实现应用程序日志的集中管理 日志在软件系统中的重要性我在此也不赘述了,几乎所有程序员每天都会更日志打交道. 那么你是否曾今为这样的一些事情而困扰过: - 远程登录到不同的 ...
- DevExpress的Web控件汉化方法
原文:DevExpress的Web控件汉化方法 项目中用到devexpress的web控件,机器没有安装devexpress控件,直接在项目中引用的dev的dll,项目运行时发现都是英文界面,所以解决 ...
- IOS发展--他们控制的定义
有没有这样的要求,,自定义panel,里面放几个控件,在多个页面中使用此panel. 有三个观点来解决这个问题: 1.自己继承UIView写一个类,在它是在代码的形式加入需要控制.完成布局. 2.使用 ...
- ASP.Net MVC请求处理流程
ASP.Net MVC请求处理流程 好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人& ...
- Js创建对象的做法
1.对象工具包 <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- Appium Server 源码分析之启动运行Express http服务器
通过上一个系列Appium Android Bootstrap源码分析我们了解到了appium在安卓目标机器上是如何通过bootstrap这个服务来接收appium从pc端发送过来的命令,并最终使用u ...
- 基于Bootstrap的Asp.net Mvc 分页
基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...
- 【硬件】DELLserver硬件监控和DELL系统管理工具OMSA介绍
1.1.1. DELLserver硬件监控和DELL系统管理工具OMSA介绍 本文介绍了利用使用Nagios和OMSA显示器DELLserver硬件健康状况,Nagios监控的方式是NRPE模式,须要 ...
- android:由URL载入中ImageView
两种方法: 方法一: Bitmap bimage= getBitmapFromURL(bannerpath); image.setImageBitmap(bimage); public static ...