the deadline of JavaScript's this

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

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

this

this在JavaScript用處千千萬，基于自己研究和認(rèn)識(shí)，今天做一個(gè)了斷。

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

對(duì)象方法調(diào)用

閉包總指向上一級(jí)

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

引用時(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.

當(dāng)在全局環(huán)境執(zhí)行的時(shí)候，無論“嚴(yán)格模式”or“非嚴(yán)格模式”，this指向全局對(duì)象

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 等價(jià)于 var a = 37;
console.log(window.a); // 37

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

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

嚴(yán)格

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

方法調(diào)用

方法：當(dāng)一個(gè)函數(shù)被保存為對(duì)象的一個(gè)屬性的時(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 可以取所屬對(duì)象的上下文的方法稱為公共方法，可以使屬性，方法變成公開的屬性方法(在構(gòu)造函數(shù)，方法中用到)。

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

需要使用new來調(diào)用，函數(shù)創(chuàng)建一個(gè)對(duì)象鏈接到prototype，this會(huì)綁定到那個(gè)新的對(duì)象上。

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)用的時(shí)候會(huì)自動(dòng)取得兩個(gè)特殊的變量：this，arguments。js內(nèi)部函數(shù)調(diào)用的時(shí)候，只能搜索到其活動(dòng)對(duì)象為止，不可能直接訪問外部函數(shù)中的變量。

解決方案：

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

接收兩個(gè)參數(shù)，第一個(gè)綁定給this，第二個(gè)就是一個(gè)參數(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é)，個(gè)人見解，歡迎批評(píng)指正