转载

the deadline of JavaScript’s this

this

this在JavaScript用处千千万，基于自己研究和认识，今天做一个了断。

全局，匿名函数调用
方法调用
闭包总指向上一级
构造函数中，指向本身
引用时候，指向Windows
apply调用

全局(Global context)

In the global execution context (outside of any function),this refers to the global object, whether in strict mode or not.

当在全局环境执行的时候，无论“严格模式”or“非严格模式”，this指向全局对象

console.log(this.document === document); // true // In web browsers, the window object is also the global object: console.log(this === window); // true this.a = 37;//this.a 等价于 var a = 37; console.log(window.a); // 37

函数中严与非严格有区别

function f1(){   return this; } f1() === window; // global object

严格

function f2(){   "use strict"; // see strict mode   return this; } f2() === undefined;

方法调用

方法：当一个函数被保存为对象的一个属性的时候。

var num = {  sum: 0,  add: function(x,y){   this.sum = x + y;   console.log(this);  } } num.add(2,3); console.log(num.sum);

this 可以取所属对象的上下文的方法称为 公共方法 ，可以使属性，方法变成公开的属性方法(在构造函数，方法中用到)。

构造器调用

需要使用new来调用，函数创建一个对象链接到prototype，this会绑定到那个新的对象上。

var Person= function(name){  this.name= name; }  Person.prototype.showname= function(){  console.log(this);  return this.name; } var p = new Person('duke'); console.log('duke'+':'+p.showname());

函数调用

函数调用的时候会自动取得两个特殊的变量：this，arguments。js内部函数调用的时候，只能搜索到其活动对象为止，不可能直接访问外部函数中的变量。

解决方案：

如果该方法定义一个变量并给他赋值为this，那么内部函数就可以通过那个变量访问到this，我们可以把那个变量定义为that。

var myfun= {  num: 1,  fadd: function(x){   this.num= x+3  } } myfun.double= function(){  var that = this;  console.log(that);  var d= function(){   that.num= 90;   that.num2= 1999;//可以用作添加属性   console.log(that);  }  d(); } // 这个案例说明没有外部变量引入到内部函数中 myfun.three= function(){  console.log(this);  console.log('three'+this.num);  var that = this;//key point   var t = function(){   console.log('this'+this);   console.log('that'+that);   console.log('inner'+this.num);   console.log('inner'+that.num);  }  t(); } myfun.fadd(4); console.log(myfun.num); myfun.double(); console.log('double'+myfun.num); myfun.three();

apply调用

接收两个参数，第一个绑定给this，第二个就是一个参数数组

apply,call用法

apply

javascript中的this应用

apply,call 延伸

Where a function uses the this keyword in its body,

its value can be bound to a particular object in the call using the

call or apply methods that all functions inherit from Function.prototype.

function add(c, d){   return this.a + this.b + c + d; } var o = {a:1, b:3}; // The first parameter is the object to use as // 'this', subsequent parameters are passed as  // arguments in the function call add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 // The first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

用在类型检测

function bar() {   console.log(Object.prototype.toString.call(this)); } bar.call(7); // [object Number] // 用apply较多，使用范围广 function bar() {   console.log(Object.prototype.toString.apply(this)); } bar.apply(7); // [object Number]

As a DOM event handler（dom事件处理）

When a function is used as an event handler,its this is set to the element the event fired from

用作事件的处理，给元素绑定方法

// When called as a listener, turns the related element blue function bluify(e){   // Always true   console.log(this === e.currentTarget);    // true when currentTarget and target are the same object   console.log(this === e.target);   this.style.backgroundColor = '#A5D9F3'; }  // Get a list of every element in the document var elements = document.getElementsByTagName('*');  // Add bluify as a click listener so when the // element is clicked on, it turns blue for(var i=0 ; i<elements.length ; i++){   elements[i].addEventListener('click', bluify, false); }

参考developer.mozilla

总结，个人见解，欢迎批评指正

正文到此结束

所属分类：编程技术

本文标签： tar list value js key ip DOM windows Document web App Developer java IDE 总结 UI 参数
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二