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