this的五种绑定方式

this的五种绑定规则共有五种
- 默认绑定（严格/非严格模式）
- 隐式绑定
- 显式绑定
- new绑定
- 箭头函数绑定
默认绑定（严格/非严格模式）
- 独立函数调用，可以把默认绑定看作是无法应用其他规则的默认规则，this指向全局对象
- 严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined。只有函数运行在非严格模式下，默认绑定才能绑定到全局对象，在严格模式下调用函数则不影响默认绑定
- ```
function(){//运行在严格模式下，this会绑定到undefined"use strict";console.log(this.a);
}
var a= 2;
foo();function foo(){console.log(this.a);
}
var a=2;(function(){//严格模式下调用函数则不影响默认绑定"use  strict";foo();//2
})()
```
- 隐式绑定
  - 当函数引用由上下文对象时，隐式绑定规则会把函数中的this绑定到这个上下文对象。对象属性引用链上只有一层或者说最后一层在调用中起作用。
  - ```
  function foo(){console.log(this.a);
  }
  var obj = {a:2,foo:foo
  };
  obj.foo();//2
```
- 隐式丢失:被隐式绑定的函数特定情况下会丢失绑定对象，应用默认绑定，把this绑定到全局对象或者undefined上。
- 虽然bar时obj.foo的一个引用，但是实际上，它引用的是foo函数本身。bar()是一个不带任何修饰的函数调用，应用默认绑定。
- ```
function foo(){console.log(this.a);
}
var obj = {a:2,foo:foo
};
var bar = obj.foo;//函数别名
var a = 'oops,global';//a是全局对象的属性
bar(); //'oops,global'
```
  - 参数传递就是一种隐式赋值，传入函数时也会被隐式赋值。回调函数丢失this绑定是非常常见的
  - ```
  function foo(){console.log(this.a);
  }
  function doFoo(fn){//fn其实引用的是foo fn();  //调用位置
  }
  var obj ={a:2,foo:foo
  };
  var a = 'oops,global';//a是全局对象的属性
  doFoo(obj.foo); //'oops,global'
```
- 显式绑定
  - 通过call(…)或者apply(…)方法。第一个参数是一个对象，在调用函数时将这个对象绑定到this,因为直接指定this的绑定对象，称之为显式绑定
  - ```
  function foo(){console.log(this.a);
  }
  var obj ={a:2
  }
  foo.call(obj);//2  调用foo时强制把foo的this绑定到obj上
```
- 硬绑定 Function.prototype.binf
- new绑定
  - 创建/构造一个新对象
  - 这个新对象会被执行[[Prototype]]连接
  - 这个新对象会绑定到函数调用的this
  - 如果函数没有返回其他对象，那么new表达式中的函数会自动返回这个新对象
  - ```
  function create(){//创建一个空的对象let obj = new Object()//获得构造函数let Con = [].shift.call(arguments)//链接到原型obj.__ proto __ = Con.prototype  //绑定this，执行构造函数let result = Con.apply(obj,arguments) //确保new出来的是个对象return  typeof result === 'object'?result :obj
  }
```

this的五种绑定方式相关推荐

JavaScript中this的五种绑定方式详解
1 this的五种绑定方式 1.1 默认绑定默认绑定是指当函数调用时,没有为其指定对象上下文,此时会将该函数的this绑定到全局对象(window对象).自ES5有了严格模式之后,默认绑定方式又分为 ...
C++中的两种绑定方式（静态绑定、动态绑定）
两种绑定方式静态绑定:在编译时刻,根据指针或引用变量的静态类型来决定成员函数属于哪一个类. 动态绑定:在运行时刻,根据指针或引用变量实际指向或引用的对象类型(动态类型)来确定成员函数属于哪一个类. ...
五种排序方式gif展示【python】
简述有五种排序方式. 文章目录简述排序简单排序冒泡排序选择排序归并排序快速排序排序简单排序 import numpy as np import matplotlib.pyplot ...
Silverlight C# 游戏开发：游戏循环体的五种设计方式
我们在游戏设计和开发中,尤其是引擎开发中,逻辑循环是一个重要组成部分,循环决定了游戏的基础逻辑和运行方式,在不同的开发环境和语言下,对于循环的释义甚至相差甚远,那么我想和大家分享的是在Silverli ...
谈表达式树的缓存（7）：五种缓存方式的总体分析及改进方案
终于到了这个系列的最后一篇文章了,这个系列的文章本是许多话题的基础,却拖了那么长时间还没有完结.这篇文章主要讨论五种缓存方式各自的优劣,以及他们的性能关键在什么地方,如果要进行改进又有什么可选方案.在 ...
Java防止Xss注入json_XSS的两种攻击方式及五种防御方式
XSS介绍跨站脚本攻击指的是自己的网站运行了别的网站里面的代码攻击原理是原本需要接受数据但是一段脚本放置在了数据中: 该攻击方式能做什么? 获取页面数据获取Cookies 劫持前端逻辑发送请求 ...
后端技术：Java定时任务的五种创建方式
Quartz表达式生成地址:http://cron.qqe2.com/ 支持生成定时任务表达式和反解析,使用Quartz表达式的定时任务如下 xxl-job springboot 的 @Schedul ...
Jdbc连接mysql的五种连接方式
一:五种连接方式直接上码 package com.wyjedu.jdbc;import com.mysql.jdbc.Driver;import java.io.FileInputStream; i ...
java两种绑定方式_Javascript绑定事件的两种方式的区别
命名函数 function check(){ //code } 匿名函数 window.onload = function(){ //先获取元素对象,再绑定事件,绑定的是匿名函数不可重用 var bt ...
lfu算法实现java_LFU五种实现方式，从简单到复杂
前言最近刷力扣题,对于我这种 0 基础来说,真的是脑壳疼啊.这个月我估计都是中等和困难题,没有简单题了. 幸好,力扣上有各种大牛给写题解.看着他们行云流水的代码,真的是羡慕不已.让我印象最深刻的就是 ...

this的五种绑定方式

this的五种绑定方式

this的五种绑定方式相关推荐

最新文章

热门文章