js基於原型鏈，對象的類的寫法

網上的資料很多,關於閉包，原型鏈，面向對象之內的。本人也有一點自己的總結。

 關於this：

this 的值取決於 function 被調用的方式，一共有四種，

• 如果一個 function 是一個對象的屬性，該 funtion 被調用的時候，this 的值是這個對象。如果 function 調用的表達式包含句點（.）或是 []，this 的值是句點（.）或是 [] 之前的對象。如myObj.func 和myObj["func"] 中，func 被調用時的 this 是myObj。
• 如果一個 function 不是作為一個對象的屬性，那么該 function 被調用的時候，this 的值是全局對象。當一個 function 中包含內部 function 的時候，如果不理解 this 的正確含義，很容易造成錯誤。這是由於內部 function 的 this 值與它外部的 function 的 this 值是不一樣的。解決辦法是將外部 function 的 this 值保存在一個變量中，在內部 function 中使用它來查找變量。
• 如果在一個 function 之前使用 new 的話，會創建一個新的對象，該 funtion 也會被調用，而 this 的值是新創建的那個對象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中，通過調用new User("Alex") ，會創建一個新的對象，以user1 來引用，User 這個 function 也會被調用，會在user1 這個對象中設置名為name 的屬性，其值是Alex 。
• 可以通過 function 的 apply 和 call 方法來指定它被調用的時候的 this 的值。 apply 和 call 的第一個參數都是要指定的 this 的值。由於它們存在，我們得以創建各種有用的函數。

  var object = {
        name:"my object",
        getnamefunc:function () {
            var that = this
            name = "window.name"
            return function () {
                alert(this)

                return  this.name
            }.call(this);
        }
    }
    alert(object.getnamefunc())

 

關於new：如果在一個函數前面帶上new來調用該函數，那么將創建一個隱藏連接到該函數的prototype成員的新對象。

關於call，apply。call，apply的直接意義就是方法調用，與直接a()調用的區別是，因為js函數的this完全取決於函數調用時的狀態，類似閉包這樣的結構，this就會指向window全局對象，通過，call可以指定調用函數內的this值。

js的類的寫法一般分為閉包，prototype 之於的對象兩種。prototype和function對象是js的最特別之處（個人認為最酷的地方，關鍵是寫法非常的靈活而且讀起來結構非常清晰），所以一般我喜歡使用第二種方法寫js的類。

方法很簡單一般是建立空的構造器函數，使其protoype到一個json結構的對象（這樣結構會非常清晰）。最后對空的構造器函數new ， 創建實例。

 

var pri={name:"soso",init:function(name){this.name=name},pri:function(){alert(this.name)}}  
function _temp(){}
_temp.prototype= pri
var s =new _temp()
s.init(123)
s.pri()
     
var ss=new _temp()
ss.init(1234)
ss.pri()
s.pri() 
     
 
var d=new _temp()
d.pri()

　　問題是如果我想在類中寫jquery事件的話，this就會指向擊發事件的dom對象而不是函數對象，所以根據作用域，在事件函數前方法函數（pri）中將this屬性傳給局部變量var i與 var $obj 特別要注意的是必須加上var，否則就是全局變量（成為window全局對象的一個屬性，而不是pri方法的私有變量，在創建多個實例的情況下會出錯）。

正確寫法，加var

 var p = {
                name:"soso",
                init:function (name, i) {
                    this.obj = name, this.i = i
                },
                pri:function () {
                    var i = this.i//要加var
                    var $obj = this.obj
                    this.obj.click(function () {
                        $obj.html(i);
                        i++
                    })
                    this.i = i
                }
            }

            function _temp() {
            }

            _temp.prototype = p
            var s = new _temp()
            s.init($("#ee"), 1)
            s.pri()

            var ss = new _temp()
            ss.init($("#co"), 20)
            ss.pri()

　　

　　

　發現每創建一個實例，需要手動init屬性。最后一步完善，利用arguments，apply完善構造器函數　

 

var p = {
               name:"soso",
               init:function (name, i) {
                   this.obj = name, this.i = i
               },
               pri:function () {
                   var i = this.i//要加var
                   var $obj = this.obj
                   this.obj.click(function () {
                       $obj.html(i);
                       i++
                   })
                   this.i = i
               }
           }
 
           function _temp() {
			   this.init.apply(this,arguments)
           }//apply調用初始化方法，arguments獲得參數
 
           _temp.prototype = p
           var s = new _temp($("#ee"), 1)
       
           s.pri()
 
           var ss = new _temp($("#co"), 20)
      
           ss.pri()

 

在這一過程中，也理解了 var p={ inti:function(){this.name=“###”}}與 var p={init:function(){p.init.name=“###”}}的本質區別

  $(document).ready(function () {
            var p = { init:function (obj, name) {
                p.init.j = name//此處用對象名代替this對象，寫法是錯誤的，
                // 區別在於使用this時,建立的對象是對prototype繼承的屬性重寫，而此處對象名的操作則是直接對原型的修改。所有繼承此原型的對象的該屬性的值都會被修改

                this.obj = obj
                obj.html(p.init.j)
            },
                pri:function () {
                    this.obj.click(function () {
                        p.init.j++
                        $(this).html(p.init.j)

                    })
                }}

            function temp() {
                this.init.apply(this, arguments)
            }

            temp.prototype = p;
            var k1 = new temp($(".div1"), 2)
            k1.pri()
            var k2 = new temp($(".div2"), 25)
            k2.pri()
        })

 錯誤示例