2019獨角獸企業重金招聘Python工程師標準>>>

?前言： javascript 項目中原生態的語法用得比較少了，都是基于jQuery開發，但在移動項目中還是比較麻煩的。想整理個簡單點的框架。這篇文章是基于 javascript dom 高級程序設計這本書來討論的，這本書在框架開發方面還是比較好的。javascript 框架能夠便于利用，最好能像C# Java 這類面向對象語言來組織代碼和復用功能模塊，因此這里說說javascript面向對象的一些開發方式。例如命名空間，對象，對象的繼承等等。

? ? 1. 命名空間

? ? 一般用到命名空間，主要是為了便于程序的組織，分模塊；同時可以解決大量javascript代碼帶來的潛在的javascript對象沖突。當然，這里并不是一種真正的命名空間，其實質還是js對象。例如： (function () {//命名空間if (!window.TScript) { window['TScript'] = {} }function $() {var elements = new Array();for (var i = 0; i <= arguments.length; i++) {var element = arguments[i];if (typeof element == 'string') {element = document.getElementById(element);}if (arguments.length == 1) {return element;}elements.push(element);}return elements;};window['TScript']['$'] = $; )();

? ?訪問的時候就可以直接使用 TScript.$('id')。獲取javascript對象了，這樣TScript實際上就是一個命名空間。但是是否會覺得 TScript.$ 這樣每次都加個TScript太羅嗦，可以這樣：

(function($){// $("id") })(TScript.$);

這樣通過立即執行函數來簡化操作，就像通常開發jQuery 插件一樣，(function($){ //采用jQuery對象 })(jQuery);

這里在網上收集到兩種命名空間的方式，實際上是構建一個函數，來注冊命名空間可以復用，比較方便。

1. YUI的。

//YUI命名空間的實現方法 var YAHOO = window.YAHOO || {}; YAHOO.namespace = function(ns) {if (!ns || !ns.length) {return null;}var levels = ns.split(".");var nsobj = YAHOO;//如果申請的命名空間是在YAHOO下的，則必須忽略它，否則就成了YAHOO.YAHOO了for (var i=(levels[0] == "YAHOO") ? 1 : 0; i<levels.length; ++i) {//如果當前命名空間下不存在，則新建一個關聯數組。nsobj[levels[i]] = nsobj[levels[i]] || {};nsobj = nsobj[levels[i]];}//返回所申請命名空間的一個引用；return nsobj; }; 2. 不知名的。主要是可以做成com.oschina.* 這種java包風格的。 Namespace = new Object();Namespace.register = function (namespace) {var nsArray = namespace.split('.');var sEval = "";var sNs = "";for (var i = 0; i < nsArray.length; i++) {if (i != 0) {sNs += ".";}sNs += nsArray[i];sEval += "if(typeof(" + sNs + ")=='undefined')" + sNs + "=new Object();";}if (sEval != "") {eval(sEval);}};

2.對象及繼承

前面提到javascript里的一切都是對象，其實這里說對象是構建一個類似java 的構造函數：

function Apple(color) {this.color = color; } var apple = new Apple("red"); 這里總結一下比較常用的對象繼承方式，在js里說繼承主要是共用一些數據，減少內存。通常采用原型來實現propertype。例如： function Fruit() { }Fruit.prototype.des = "水果";function Apple(area) {this.area = area;}var F = function () { }; //這里采用空對象做中介，實現繼承F.prototype = Fruit.prototype;Apple.prototype = new F();Apple.prototype.constructor=Apple

這里為什么用空對象做中介，因為如果直接Apple.prototype=Fruit.prototype。這樣它們共用的是同一份數據，如果對Apple.prototype的修改會反映到Fruit上去。

YUI做了一個封裝，類似命名空間一樣：

function extend(Child, Parent) {var F = function () { };F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype; //上級父對象的引用 } 還有一種jquery的拷貝賦值的方式繼承：

//jquery 拷貝繼承，將父對象的所有屬性拷貝賦值給子對象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;}var Apple = deepCopy(Fruit);

3. 關于this

可以一句話來說明下：this關鍵字引用的是包含它的函數作為某個對象的方法被調用時的那個對象。

我們知道在js腳本里面，所有的成員，包括變量，函數都是windows是對象的成員。那么在下面的例子中：

value = "window";function testThis() {this.value = "testThis";}testThis();alert(value);// testThis; 這里函數直接調用，那么調用函數的對象是window ，因此函數內的this指的是window。

那么下面：

value = "window";function testThis() {this.value = "testThis";}var obj = new testThis();alert(obj.value);//testThisalert(value);//window 第一次彈出的是testThis，這是由于此時testThis函數作為對象來訪問，那么函數內的this就表示實例化的這個obj對象，詳相當于在函數內部將value覆蓋了。而函數外部的value沒有影響，仍然作為window的成員，所以第二次彈出window。

轉載于:https://my.oschina.net/congqian/blog/135831

總結

以上是生活随笔為你收集整理的javascript里的面向对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。