javascript this的使用

/**
 作为对象方法调用
 在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，
 此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象。*/

var g = 10;


var shape = {
    w: 10,
    h: 10,
    resize: function (w, h) {
        this.w = w;
        this.h = w;
        console.log(this.g)
        console.log(this.w)
        console.log(this.h)
    }
}

shape.resize(1, 2)
console.log(shape)

/**
 函数也可以直接被调用，此时 this 绑定到全局对象。
 在浏览器中，window 就是该全局对象。
 比如下面的例子：函数被调用时，this 被绑定到全局对象，接下来执行赋值语句，
 相当于隐式的声明了一个全局变量，这显然不是调用者希望的。*/

function setaVariable(x) {
    this.x = x;
}

setaVariable(10)
console.log(x)


/**
 对于内部函数，即声明在另外一个函数体内的函数，
 这种绑定到全局对象的方式会产生另外一个问题。*/
var shapeB = {
    w: 10,
    h: 10,
    resize: function (w, h) {

        var resizeW = function (w) {
            this.w = w;
        }

        var resizeH = function (h) {
            this.h = h;
        }
        resizeH(h)
        resizeW(w)
    }
}


shapeB.resize(0, 0)
console.log(shapeB)
console.log(h)//0
console.log(w)//0

/**
 * 这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。
 */



var shapeA = {
    w: 10,
    h: 10,
    resize: function (w, h) {

        var that = this;

        var resizeW = function (w) {
            that.w = w;
        }

        var resizeH = function (h) {
            that.h = h;
        }
        resizeH(h)
        resizeW(w)
    }
}


shapeA.resize(3, 3);
console.log(shapeA)


/**
 作为构造函数调用
 JavaScript 支持面向对象式编程，与主流的面向对象式编程语言不同，JavaScript 并没有类（class）的概念，而是使用基于原型（prototype）的继承方式。相应的，JavaScript 中的构造函数也很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。
 如果调用正确，this 绑定到新创建的对象上。*/


function H(x, y) {
    this.xx = x;
    this.yy = y;
    this.say = function () {
        console.log(this.g)
        console.log(this.xx)
        console.log(this.yy)
    }

}

new H(4, 5).say();

/*
apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context）
 */


new H(4, 5).say.apply({xx: 10, yy: 12, g: 10});