JavaScript 面向对象（一）

this 关键字

this 指针所代表的是当前对象。但是，必须清楚的明确 当前对象 是哪个对象

<script type="text/javascript">

  /**
   * 页面加载时候由 JavaScript 引擎实例化了 window 对象
   * 页面上的各种元素全部处于该 window 对象之中
   * 此时 this 指针全部指向的是 window
   *
   */

  console.log(this); // window
  console.log(this.name); // undefined
  console.log(name); // undefined

  var name = "Lucy"; // 该变量是全局变量
  console.log(this.name); // "Lucy"

  console.log(this == window); // true
  console.log(this === window); // true

</script>

<script type="text/javascript">

  /**
   * this 指针指向的是实例化对象。
   * show() 方法是一个函数，它并不是一个对象，更提不上实例化。
   * 所以 this 指向的对象没有被改变，依然是 window。
   * this.name 自然也就是代码第一行中定义的 "Jack"。
   *
   */

  var name = "Jack"; // 全局变量

  function show(name) {
    console.log(name); // "Locy"
    console.log(this); // window
    console.log(this.name); // "Jack"
  }

  show("Locy");
</script>

<script type="text/javascript">

  /**
   * 此处 this 指向的已经不是 window 了，指向的都是 object 这个对象。
   * 因为 object 已经被实例化了，它是通过 new 关键字被实例化的。
   * 而它的 show 属性是一个方法，
   * 该方法中的 this 关键字自然指向的是已经被实例化的 object
   * object 被实例化的时候，this 已经由指向 window 变成了指向 object。
   *
   */

  var name = "Jack"; // 全局变量

  var object = new Object(); // 实例化一个对象
  object.name = "Locy"; // 声明对象 name 属性，并赋值为 "Locy"
  object.show = function () { // 声明对象 show 属性，并赋值为一个方法
    console.log(name); // "Jack"
    console.log(this); // Object {name: "Locy", show: function}
    console.log(this.name); // "Locy"
  };

  object.show(); // 调用方法
</script>

<script type="text/javascript">

  /**
   * 这种字面量方式定义对象和上面通过 new 关键字定义对象，本质上是一样的
   * 所以打印的结果也是一样的。
   *
   */

  var name = "Jack"; // 全局变量

  var object = {
    name: "Locy",
    show: function () {
      console.log(name); // "Jack"
      console.log(this); // Object {name: "Locy", show: function}
      console.log(this.name); // "Locy"
    }
  };

  object.show();
</script>

<script type="text/javascript">

  /**
   * 更清晰的表现方式
   * 定义一个方法，分别打印 this、name、this.name
   *
   */

  function show(name){
    console.log(this);
    console.log(name);
    console.log(this.name);
  }

  /**
   * 使用了 new 操作符，this 便指向了实例化的对象
   * 打印结果：show{} "Locy" undefined
   *
   */

  var locy = new show("Locy");

  /**
   * 没用实例化对象，只是引用了该方法而已，this 依然指向 window 对象
   * 打印结果：window{} "Jack" undefined
   *
   */

  var jack = show("Jack");
</script>