Javascript学习摘抄，this的用法 ①

掌握this用法，自己写代码不迷糊。同时也为了看懂别人的代码。

一般函数执行，this指代全局。

function test(){

    this.x = 1;

    console.log(this.x);

}

test(); 

---

隐式绑定与显式绑定

var star = {
    name: '蔡徐坤',
    greeting:function(a, b, c){
        console.log(a,  b,  c);
        console.log('大家好我是', this.name);
    },
    master:{
        name:'马保国',
        greeting:function(){
            console.log('大家好俺是', this.name);
        }
    }
};

..隐式绑定

star.greeting()     //   this指向star这个object

star.master.greeting()         //  this指向starobject下的master元素，当前master对象

面试题陷阱

var specialGreeting = star.greeting;   

specialGreeting();      //this指向window，window.specialGreeting，作用于全局 

window.specialGreeting();       //   亦可写作window.specialGreeting，作用于全局

..显式绑定

1.call     2.apply     3.bind

1.call()  无视this，强行绑定参数。改变this指向，括号内第一个为this的绑定对象，单独传每个参数。

var star2 = {

    name: '肖战'

};



star.greeting.call(star2, 'a' ,'b' ,'c');   //调用star.greeting，this使用call绑定star2,a b c 分别对应函数里的abc

star.master.greeting.call(star2);   //调用star.master.greeting，this使用call绑定star2

2.apply()  无视this，强行绑定参数。改变this指向，括号内第一个为this的绑定对象，后面按照数组传参。

star.greeting.apply(star2);   //调用star函数，this使用apply显示绑定star2

star.master.greeting.call(star2, ['a', 'b', 'c']);   //调用star.master函数，this使用call显示绑定star2 

3.bind()   bind绑定不会直接传参，返回的是函数。

// star.greeting.bind(star2);  bind绑定不会立刻执行，返回的是个函数。
var specialGreeting = star.greeting.bind(star2);        //返回的是个函数，故需保存
specialGreeting();        //调用specialGreeting()，此时this绑定了star2

构造函数里new了新对象后，this绑定新对象。

function Star(name){
    this.name = name;
    this.greeting = function(){
        console.log('Hey,我是', this.name);
    }
}
var superstar = new Star('蔡依林');
console.log(superstar);
superstar.greeting();

 ES6新增箭头函数

ES6中箭头函数的几种缩写

function sum(a, b){
    return a + b;
};

(a, b) =>{
    return a + b;
}

(a, b) => a + b; //匿名函数

var sum = (a, b) => a + b; //匿名函数，需要用变量赋值的方式保存函数名字，var sum =。 

var star = {
    name: '蔡徐坤',
    favourites: ['篮球', '唱跳', 'rap'],
    greeting: function(){
        console.log(
            '大家好，我是',
            this.name,
            '我的爱好是',
            this.favourites
        );
        this.favourites.forEach( (item) => {
            console.log(this);      //如果不使用箭头函数，此处this指代全局
            console.log(item);
        });            arrow function 的this在语法层面会直接继承调用
    }
};

star.greeting();

很明显，arrow function 的this 在语法层面会直接继承 《调用》。