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

总结,个人见解,迎接批评指正

    原文作者:黑色杜克
    原文地址: https://segmentfault.com/a/1190000003021924
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞