the deadline of JavaScript's this

chinafgj 發(fā)布于2019-08-21 10:35 / 2932人閱讀

摘要：在用處千千萬，基于自己研究和認識，今天做一個了斷。可以取所屬對象的上下文的方法稱為公共方法，可以使屬性，方法變成公開的屬性方法在構(gòu)造函數(shù)，方法中用到。內(nèi)部函數(shù)調(diào)用的時候，只能搜索到其活動對象為止，不可能直接訪問外部函數(shù)中的變量。

this

this在JavaScript用處千千萬，基于自己研究和認識，今天做一個了斷。

全局，匿名函數(shù)調(diào)用

對象方法調(diào)用

閉包總指向上一級

構(gòu)造函數(shù)中，指向本身

引用時候，指向Windows

apply調(diào)用

全局(Global context)

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

當在全局環(huán)境執(zhí)行的時候，無論“嚴格模式”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

函數(shù)中嚴與非嚴格有區(qū)別

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

嚴格

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

方法調(diào)用

方法：當一個函數(shù)被保存為對象的一個屬性的時候。

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

this 可以取所屬對象的上下文的方法稱為公共方法，可以使屬性，方法變成公開的屬性方法(在構(gòu)造函數(shù)，方法中用到)。

構(gòu)造器調(diào)用

需要使用new來調(diào)用，函數(shù)創(chuàng)建一個對象鏈接到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());

函數(shù)調(diào)用

函數(shù)調(diào)用的時候會自動取得兩個特殊的變量：this，arguments。js內(nèi)部函數(shù)調(diào)用的時候，只能搜索到其活動對象為止，不可能直接訪問外部函數(shù)中的變量。

解決方案：

如果該方法定義一個變量并給他賦值為this，那么內(nèi)部函數(shù)就可以通過那個變量訪問到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();
}
// 這個案例說明沒有外部變量引入到內(nèi)部函數(shù)中
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調(diào)用

接收兩個參數(shù)，第一個綁定給this，第二個就是一個參數(shù)數(shù)組

apply,call用法

apply

javascript中的this應(yīng)用

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
參考developer.mozilla
總結(jié)，個人見解，歡迎批評指正