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