1.在瀏覽器全局環境中this指向的是Window

console.log(this); //Window

2.在事件處理函數中的this,這個事件是由誰觸發,this就指向誰

3.直接執行一個函數的時候在非嚴格模式下this指向的是Window,而在嚴格模式下是undefined

function fn1() {
    "use strict"
     console.log(this); //undefined
}
function fn2() {
     console.log(this); //Window
}
fn1();
fn2(); //相當於window.fn2();

4.關於call,apply,和bind的this

他們的作用是把this的值從一個執行環境傳入到另外一個執行環境

call和apply的區別只在於參數不同，call的參數後面可以是很多個的，而apply只能是倆個參數，後面一個參數是數組

function fn(x) {
      console.log(this.a + x); //3
}
fn.call({a:1},2);//第一個實參是對象，要改變this指向的對象，後面是你想要傳的參數

如果傳入的不是對象會調用相應的構造函數,進行隱式轉換

function fn(x) {
    console.log(this); //Number{1}
 

}
fn.call(1); //bind和apply也一樣

bind他會返回一個新的函數,改變這個新函數的執行,而且這個函數只會執行一次bind

function fn() {
    console.log(this.a);  //1
}
fn.bind({a:1})(); //返回一個新的函數，所以你要在執行這個返回的函數才會得到結果打印出1,不能在點bind

5.箭頭函數裏的this是與你定義的環境this一樣的，並且使用call，apply和bind是改變不了箭頭函數裏的this

在全局中定義一個箭頭函數，他指向的是Window

var fn = () => {
    console.log(
 
this); //Window
}
fn();

在對象裏定義一個箭頭函數，他跟這個對象的環境是一樣的

var a = 1;
var obj = {
    a:2,
    fn1:() => {
        console.log(this.a) //1
    },
    fn2:function () {
        console.log(this.a);//2
    }
}
obj.fn1();
obj.fn2();

在對象裏返回一個箭頭函數，他還是和對象的環境一樣

var a = 1;
var obj = {
    a:2,
    fn1:() => {
        return ()=>{
            console.log(this.a);  
        }
    },
    fn2:function () {
        return function(){
            console.log(this.a);  
            }
    }
}
obj.fn1()(); //1
obj.fn2()(); //1

6.構造函數

構造函數裏沒有顯式return

在構造函數中如果寫return一個是對象，一個是非對象

當你返回一個對象的時候，實例化的結果就是這個對象

當你返回一個非對象的時候，實例化的結果就是這個構造函數

function  Fn() {
    this.a = 1;
    return {}; // {}
    return ""; // Fn(){a:1}
}
var fn = new Fn();
console.log(fn);

7.getter和setter,setter會自動刷新改變的數據

var obj = {
    a : 1,
    b : 2,
    get sum(){
        console.log("getter...");
        return this.a + this.b;
    },
    set sum(x){
        console.log("setter...");
        this.a = x*2;
        this.b = x*3;
    }
}

console.log(obj.sum = 4);  //setter...   4
console.log(obj.a);  //8

整理this筆記