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);
}
总结,个人见解,欢迎批评指正
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。