jquery学习笔记---闭包，原型链，this关键字-优快云博客

网上的资料很多,关于闭包，原型链，面向对象之内的。本人也有一点自己的总结。

关于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() 
         
          })

错误示例

转载于:https://www.cnblogs.com/changrulin/p/4759678.html