this的个人笔记

使用构造函数的方式创建一个函数，再用new的方式使用该函数，也是相当于创建了一个对象

function User(name) {
 this.name = name;
 this.show = function () {
  console.log(this.name);
  function render() {
   // window对象
   console.log(this);
  }
  render();
 };
}
let xiaoming = new User('小明');
console.log(xiaoming.show()); //小明

①在一个对象中，当一个函数属于该对象的某个属性，那么称该函数为：方法/类方法

②如果对象中的函数并不属于某一个属性，那么这个函数，就只是函数

③方法/类方法 的this，指向的是当前对象

④函数 的this，指向的是window对象

⑤定义一个全局的变量，它是存在window对象中的

// name = "window's name";
let obj = {
 site: 'https',
 // show 是一个方法
 show: function () {
  // this 是这个obj对象
  console.log(this);
  // render()是一个函数
  function render() {
   // this 是window对象
   console.log(this);
   console.log(this.name);
  }
  render();
 },
};
console.log(obj.show());

this的扩展1

let obj_cart = {
 site: 'https://shopCart.com',
 front: 'world-',
 lists: ['js', 'html', 'css'],
 // 使用show()方法给lists的每一项都加上 “world-”/front 的前缀
 show: function () {
  // console.log(this);
  // 因为lists是数组，可以用map()方法

  // 用一个常量来存储this，这样map()中的回调函数需要用到对象内容的地方，用这个常量来代替就可以了
  // 也就避免了this指向window
  const self = this;

  this.lists.map(function (value) {
   // 此时是可以正确读到obj_cart对象中的lists的每一个值
   console.log(value); // js html css
   // 这时候需要注意，在show()中，因为show是属于obj_cart对象的一个方法，所以show内部的this指向的是该对象
   // 但是在map()方法中，它的回调函数不是属于show的，它不是一个类方法，所以map()中的this，是指向window的
   // console.log(this.front + value); //undefinedjs undefinedhtml undefinedcss

   // 常用的方法是：在show中的this指向本对象的时候，就用一个 常量/变量 来存储它，这样this就不会变了

   console.log(self.front + value); // world-js world-html world-css
  });
 },
};
console.log(obj_cart.show());

this的扩展2

这里的情形只针对部分函数

有些回调函数可以传递两个参数，那么第二个参数将指向对象的this传给回调函数，也就可以取到该对象了

let grades = {
 class: 'class 4-',
 mark: [11, 22, 33],
 appear: function () {
  this.mark.map(function (item) {
   console.log(this.class + item);

   // 这里将this作为第二个参数传给了map()
  }, this);
 },
};
console.log(grades.appear()); // class 4-11  class 4-22  class 4-33

this的扩展3

在箭头函数中，this所指向的是上下文

let obj_3 = {
  site: 'https',
  desk: 'first-',
  lists: ['aa', 'bb', 'cc'],
  show: function () {
    // 这里的this指向的是本对象
    console.log(this);
    this.lists.map(item => {
      // 这里的this指向的是上下文，也就是父级作用域的this
      // 往上看这个箭头函数的父级，是show()，所以此时的this和show()中的this指向一致，都是本对象
      console.log(this);
      // 因为箭头函数中的this指向的是本对象，那么通过它也就可以获取到本对象中的任意属性的值
      console.log(`${this.desk}+${item}`);
    });
  },
};
// console.log(obj_3.show());

this的扩展4，箭头函数微妙

<button>按钮</button>

let Dom = {
  site: 'btn_1',
  show: function () {
    let btn = document.querySelector('button');

    // click是作为btn的一个属性，后面跟的回调function是作为click属性的值
    // 所以，此时的回调函数是一个方法，也就是此时打印的this，是btn而不是window
    btn.addEventListener('click', function () {
      console.log(this);
      console.log(this.innerHTML);
    });
  },
};
Dom.show();