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 延长
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);
}
总结,个人见解,迎接批评指正