js面向对象 之 this 指向

         在开发过程中, 随着业务逻辑，使用模式等越来越复杂，通过显式传递上下文对象会让代码变得越来越混乱， 而使用this则不会这样。

        尤其是在用到JS 对象 和 原型时，函数可以自动引用合适的上下文对象时有多重要， 然而，this 提供了一种比较优雅的隐式传递方式来传递对象，因此在开发过程中使 代码 变得更加简洁、快速、且便易于复用。

1、函数中的this指向：

console.log('这是JS中最上层初始的this===================');  // window
console.log(this);  // window


document.getElementById("btn").onclick = function () {
    console.log('\n\n这是点击按扭事件下的this:===================');
    console.log(this);

    //将点击按扭事件下的this保存
    var _this = this;

    function fn() {
        console.log('\n\n原本以为这里面的this指向的是btn,然而却是Window===================');
        console.log(this); // window

        //如果想让这里的this不是指向window的话，可以在外上面先将点击按扭事件下的this保存到一个变量中，再调变量调this
        console.log('\n\n如果想让这里的this不是指向window的话，可以在外上面先将点击按扭事件下的this保存到一个变量中，再调变量调this===================');
        console.log(_this); // btn
    };

    //调用
    fn();

    /*
     * 在JS中： call()，bind()，apply() 这3个函数的都是用来改变this的指向的，它接收的第一个参数即是上下文对象并将其赋给this。
     * 使用call和apply会直接执行这个函数，
     * 而bind并不直接执行，而是将绑定好的this重新返回一个新函数，什么时候调用由你自己决定。
    */

    //例如1:
    function fn2() {
        console.log(_this); // btn
    };

    fn2.call(this);  //直接执行
    //fn2.apply(this); 


    //例如2:
    var fn3 = function () {
        console.log(_this); // btn
    }.bind(this);

    fn3();//绑定this重新返回一个新函数


    //例如3:
    (function () {
        console.log(_this); // btn
        //}.call(this));
    }.apply(this)); //直接执行
};

 

2、面向对象、类中的this指向：

var ClassFn = function () {
    console.log('\n\n这是类里的this:==================='); // ClassFn
    console.log(this); // ClassFn
    this.name = "请在控制面板console中查看this";

    this.showName = function () {
        console.log('\n\n这是类里的 公有、特权方法（外界可以访问）的this:===================');
        console.log(this);

        alert(this.name);
    };
};

ClassFn.prototype.Close = function () {
    console.log('\n\n这是类里的原型下的this:===================');
    console.log(this);

    if (confirm("你确定要关闭窗口吗?")) {
        window.close();
    } else {
        alert("你怕了，居然不敢关！哈哈！");
        var _this = this;
        function show() {
            console.log('\n\n这是类里的原型下的私有的this:===================');
            console.log(this);

            //alert(_this.showName('Web前端'));
            document.body.style.background = 'red';
        };
        show();
    }
};

//调用: 注! 只要是类, 就一定要通过 new 关键字来进行实例化以后再调用!!!
var C = new ClassFn();
C.showName();

document.querySelector('#close').addEventListener('click', function () {
    console.log('\n\n这是点击按扭事件下的this:===================');
    console.log(this);

    C.Close();
}, false);

在JavaScript中应注意以下要素：

     1.this永远指向函数运行时所在的对象！而不是函数被创建时所在的对象。

     2.this对象是在运行时基于函数的执行环境绑定的，在全局环境中，this等于window。

     3.this跟函数的定义没关系，跟函数的执行有大大的关系。所以“函数在哪里调用才决定了this到底引用的是啥。

     4.当函数作为对象的方法调用时，this指向该对象（简间地说：谁调用我，我就指向谁）。

     5.当函数作为淡出函数调用时，this指向全局对象（严格模式【"use strict";】时，为undefined）。

     6.构造函数中的this指向新创建的对象。

     7.嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this,当在函数中使用了this，只有在该函数直接被某对象调用时，该this才指向该对象。