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
总结，个人见解，欢迎批评指正
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
