js 函数 this理解

59 阅读3分钟

函数this指向规则

 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用(四种函数的调用方式)。一个原则,那就是this永远指向最后调用它的那个对象。

  1. 默认绑定(纯粹的函数调用):在严格模式下,this是undefined,否则是全局对象。
  2. 隐式绑定(作为对象方法的调用):函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
  3. 显示绑定(apply()调用):apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。apply()的参数为空时,默认调用全局对象。
  4. new绑定(作为构造函数调用):构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个实例对象。(注意:如果没有return语句或者return后是基本数据类型,会将this作为返回值;反之如果return了对象,则以此对象为返回值);
  5. 箭头函数:this指向定义时所在的对象(即应该继承的是父执行上下文里面的this)。箭头函数没有自己的this,它的this继承于外层代码库中的this。
  6. 自执行函数,函数里面this指向window

二 不同场景下this

this、apply、call、bind

  1. 在JS中this本质就是一个对象。
  2. DOM事件函数中的this:this指的是触发当前事件的element对象;jQuery中this指的是jQuery对象。
  3. 在JS中不存在独立的函数,所有函数必须是某个对象的方法;对象里面方法通过this访问对象里面的属性。

ES6中class函数this的理解

  1. class函数相当于构造函数一个语法糖,class内部方法对应构造函数原型对象上面的方法。
  2. 默认绑定优先级 < 显式绑定优先级;
  3. 针对隐式绑定丢失可以通过使用bind等方式解决:
<script>
  function foo() {
    // const that=this;
    console.log(this)
    console.log(this.a);
  }

  function doFoo(fn) {
    fn();
  }

  var obj = {
    a: 2,
    foo: foo
  };
  const fn1=obj.foo.bind(obj);
  var a = "oops, global";
  doFoo(fn1); // "2"
</script>

三 函数基本概念理解

函数私有属性,私有方法,特权方法,公有方法

  1. 私有属性和私有方法:指只能在函数内部访问的属性和方法(var name='小明')。
  2. 静态属性和静态方法:指无需实例化就可以直接调用的属性和方法(className.name='小明')。
  3. 公有属性与公有方法:指父类生成全部实例都可以使用的属性和方法。(公有属性:构造函数内this上的属性,也称实例属性;公有方法:定义在原型对象上面的方法)
  4. 特权方法是指通过this调用公有方法、公有属性,也称实例方法(定义在构造函数内this上的方法);
  5. 原型属性与实例属性区别

二 JS中匿名函数与匿名自执行函数

1 闭包: 定义在一个函数内部的函数”。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁

2 自执行函数

  1. 自执行匿名函数(Self-executing anonymous function):由匿名函数+闭包组成;也称立即调用的函数表达式IIFE(Immediately-Invoked Function Expression)。
  2. 自执行函数写法:
 (function(){ /*code*/ }()) :推荐使用
 (function(){  /*code*/ })():这个也可行
  1. 自执行函数作用:
  • 页面加载时需要做一些设置工作,如初始化操作,这些工作没必要重复执行,因此不需要一个有名字的复用函数
  • 做这些工作有时需要用到一些变量,这些变量不能污染全局作用域