细谈this指向

目录

1.作为对象的方法调用：

2.作为普通函数调用

3.构造器调用

4、call或apply调用

5.箭头函数

6.call和apply

(1)介绍：

（2）call和apply能做什么？

7.例题：

（1）

结束！

---

1.作为对象的方法调用：

当函数作为对象的方法被调用时，this指向该对象

var obj = {
    a: 'yuguang',
    getName: function(){
        console.log(this === obj);
        console.log(this.a);
    }
};

obj.getName(); // true yuguang

2.作为普通函数调用

当函数不作为对象的属性被调用，而是以普通函数的方式，this总是指向全局对象（在浏览器中，通常是Window对象）

window.name = 'yuguang';

var getName = function(){
    console.log(this.name);
};

getName(); // yuguang

window.name = '老王'
var obj = {
    name: 'yuguang',
    getName: function(){
        console.log(this.name);
    }
};

var getNew = obj.getName;
getNew(); // 老王	getNew重新定义一个函数，我window下的，this是windeow

3.构造器调用

var MyClass = function(){
    this.name = 'yuguang';
}
var obj = new MyClass();
console.log(obj.name)//yuguang

var MyClass = function () {
    this.name = 1;
    this.age=13;
    return {
        name: 2
    }
}
var myClass = new MyClass(); 
console.log('myClass:', myClass); // {name: 2} return的函数会直接覆盖掉age属性

4、call或apply调用

跟普通的函数调用相比，用call和apply可以动态的改变函数的this

var obj1 = {
    name: 1,
    getName: function (num = '') {
        return this.name + num;
    }
};

var obj2 = {
    name: 2,
};
// 可以理解成在 obj2的作用域下调用了 obj1.getName()函数
console.log(obj1.getName()); // 1
console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4
console.log(obj1.getName.apply(obj2, [2])); // 2 + 2 = 4

5.箭头函数

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

因此，在下面的代码中，传递给getVal函数内的this并不是调用者自身，而是外部的this～

this.val = 2;
var obj = {
    val: 1,
    getVal: () => {
        console.log(this.val);
    }
}
obj.getVal(); // 2

var obj = {
    name: '1',
    getName: function (params) {
        console.log(this.name)
    }
};
obj.getName();
var getName2 = obj.getName;
getName2();
// 1
// undefined

6.call和apply

(1)介绍：

先来看区别，是因为它们几乎没有区别，下文代码实例call和apply都可以轻易的切换。

当它们被设计出来时要做到的事情一摸一样，唯一的区别就在于传参的格式不一样

apply接受两个参数:

        第一个参数指定了函数体内this对象的指向

        第二个参数为一个带下标的参数集合（可以是数组或者类数组）

call接受的参数不固定:

        第一个参数指定了函数体内this对象的指向

        第二个参数及以后为函数调用的参数        

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
 
var id = 21;
 
foo.call({ id: 42 });
// id: 42

（2）call和apply能做什么？

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

• • 调用构造函数来实现继承;
  • 调用函数并且指定上下文的 this;
  • 调用函数并且不指定第一个参数

1.调用构造函数来实现继承

function Product(name, price) {
	this.name = name;
	this.price = price;
}

function Food(name, price) {
	Product.call(this, name, price); //
	this.category = food;
}

var hotDog = new Food('hotDog', 20);

 2.调用函数并且指定上下文的 this

function showName() {
    console.log(this.id + ':' + this.name);
};

var obj = {
    id: 1,
    name: 'yuguang'
};

showName.call(obj)

7.例题：

（1）

var dev='efb'
const obj = {
    dev: 'bfe',
    a: function() {
      return this.dev
    },
    b() {
      return this.dev
    },
    c: () => {
      return this.dev
    },
    d: function() {
      return (() => {
        return this.dev
      })()
    },
    e: function() {
      return this.b()
    },
    f: function() {
      return this.b
    },
    g: function() {
      return this.c()
    },
    h: function() {
      return this.c
    },
      i: function() {
      return () => {
        return this.dev
      }
    }
  }
  console.log(obj.a())
  console.log(obj.b())
  console.log(obj.c())
  console.log(obj.d())
  console.log(obj.e())
  console.log(obj.f()())
  console.log(obj.g())
  console.log(obj.h()())
  console.log(obj.i()())
//严格状态下：
// bfe
// bfe
// undefined  箭头函数this=>window
// bfe				直接调用
// bfe
// undefined	
// undefined	箭头函数
// undefined	
// bfe				

//非严格状态下：
//undefined全换成efd

结束！

太务实会使人身心疲惫，缺乏精神上的价值；太务虚很多时候不能做好事情，缺乏物质上的价值。

怎样平衡好务实和务虚呢？