javascripts的this
前言
javascript 的 this 指向主要是依赖上下文对象决定,箭头函数例外。
默认绑定
在全局作用域下调用函数,函数的this
默认指向window
。
注意1:严格模式下,默认指向undefined
function test() {
console.log(this.a);
}
var a = 1;
test(); // 1
// 严格模式
function test() {
'use strict';
console.log(this.a);
}
var a = 1;
test(); // TypeEror 报错
注意2:全局作用域下 var
声明的变量会默认绑定到window
,而let
、const
声明的变量不会
let a = 1;
var b = 1;
window.a // undefined
window.b // 1
隐式绑定
当函数引用有上下文对象时,this
隐式绑定到这个上下文对象中。
function test() {
console.log(this.a);
}
var obj = {
a: 1,
test: test
}
var a = 2;
obj.test(); // 1
隐式丢失
function test() {
console.log(this.a);
}
var obj = {
a: 1,
test: test
}
var a = 2;
// 隐式丢失,this 应用默认绑定规则
var bar = obj.test;
bar() // 2
显式绑定
call
、apply
、bind
等显式改变this
指向。
注意:非严格模式下,call
、apply
、bind
等传入null
、undefined
会默认转为window
function test() {
console.log(this.a);
}
var obj = {
a: 1
}
var a = 2;
test(); // 2
test.call(obj); // 1
test.apply(obj); // 1
var bTest = test.bind(obj);
bTest(); // 1
注意2:多次使用bind
,this
只会指向第一次bind
的this
function test() {
console.log(this.a);
}
var obj1 = { a: 1 }
var obj2 = { a: 2 }
var obj3 = { a: 3 }
var bind1 = test.bind(obj1);
bind1(); // 1
var bind2 = bind1.bind(obj2);
bind2(); // 1
var bind3 = bind2.bind(obj3);
bind3(); // 1
内置函数改变this
指向
function test() {
console.log(this.a);
}
var obj = {
a: 1
}
var arr = [1, 2, 3];
arr.forEach(test, obj); // 打印 3 个 1
new 绑定
使用new
操作符会产生如下步骤:
- 创建一个新的空对象。
- 将新对象与构造函数的
prototype
相连。 - 新对象绑定带构造函数的
this
。 - 如果构造函数有返回值,且返回值是对象,则返回构造函数的返回值,否则返回新建的对象。
function create() {
let obj = new Object();
let constructor = [].shift.call(arguments);
// obj.__proto__ = constructor.prototype;
Object.setPrototypeOf(obj, constructor.prototype);
// 改变 this
let res = constructor.apply(obj, arguments);
const isObj = Object.prototype.toString.call(res) === '[object Object]';
return isObj ? result : obj;
}
箭头函数
箭头函数比较特殊,它有以下几个特点:
没有自身的
this
,在定义时默认绑定父级作用域的this
,即采用词法作用域绑定this
.没有原型
prototype
,无法使用 new 操作符,即不能作为构造函数.无法使用
call
、apply
、bind
等显式改变其this
.const test = () => console.log(this);
let obj = {}; test(); // window
test.call(obj); // window const foo = test.bind(obj);
foo(); // window
javascripts的this的更多相关文章
- JavaScripts基础
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...
- HTML JavaScripts
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...
- javascripts学习笔记(五):用js来实现缩略语列表、文献来源链接和快捷键列表。
1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如: <p> The <abbr title="World Wide Web Consortium"> ...
- FW: javascripts 要不要加引号
Javascript编程风格 http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html 作者: 阮一峰 日期: ...
- JavaScripts 基础详细笔记整理
一.JS简介 JavaScript 是 Web 的编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理 ...
- javascripts 实习自动提交表单 onsubmit
html: <form id="formwb" onsubmit="return setPassword();"> <script> d ...
- JavaScripts学习日记——XML DTD Schema
今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...
- JavaScripts学习日记——DOM SAX JAXP DEMO4J XPath
今日关键词: XML解析器 DOM SAX JAXP DEMO4J XPath XML解析器 1.解析器概述 什么是解析器 XML是保存数据的文件,XML中保存的数据也需要被程序读取然后使用.那么程序 ...
- JavaScripts学习日记——DOM
DOM Document Object Model 文档对象模型 整合js和html css.控制html文档行为.DOM就是把页面当中所有内容全部封装成对象.HTML文档中万物皆对象.1.对象的分 ...
- JavaScripts学习日记——BOM
IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执 ...
随机推荐
- LVS服务原理以及搭建
一.LVS简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,目的在于使用集群技术和Linux操作系统实现一个高性能.高可用的服务器.它 ...
- Nexus 安装运维手册
1. Nexus 安装与配置 1.1 下载Nexus 登录https://www.sonatype.com/download-oss-sonatype,下载最新的Nexus版本. 我这里使用的是nex ...
- android wifi断开原因分析
最近在解bug的过程中经常遇到密码正确但处于saved的状态,总结原因有已下几种: 1 在ASSOCIATING阶段由于丢包导致ASSOC REJECT 03-16 09:22:12.440 D/Wi ...
- linux中的挂载命令
一.查询与自动挂载 查询系统中已经挂载的设备,-l会显示卷标名称 mount [-l] oot@izm5e2q95pbpe1hh0kkwoiz tmp]# mount sysfs on /sys ty ...
- C# 利用委托事件进行窗体间的传值(新手必看)
引言: 窗体间传值是每个学习WinForm新手的常见问题,最初级的方法就是 在窗体中先获取到要接受值窗体.然后通过.得到某个空间或者属性,直接赋值,这个需要接收放的窗体属性或者空间必须是public ...
- 零基础Python应该怎样学习呢?(附视频教程)
Python应该怎样学习呢? 阶段一:适合自己的学习方式 对于零基础的初学者来说,最迷茫的是不知道怎样开始学习?那这里小编建议可以采用视频+书籍的方式进行学习.看视频学习可以让你迅速掌握编程的基础语法 ...
- Linux下使用VsCode进行Qt开发环境搭建
最近在Linux上搞Qt, vim环境还用不太习惯, QtCreator之前使用时莫名其妙崩溃然后丢失代码之后就被我彻底放弃了, 于是研究了一下用VsCode进行Qt开发. 首先是系统环境和下载安装包 ...
- Appium超详细环境搭建for Mac
兜兜转转试用了一圈自动化框架后,回归到appium,与一年之前相比,appium有了很大的改变:1.iOS 9 之前一直以 instruments 下的 UIAutomation为驱动底层技术(弊 ...
- luogu P3369 【模板】普通平衡树
————————————————版权声明:本文为CSDN博主「ModestCoder_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https:// ...
- 清北学堂—2020.1提高储备营—Day 4 morning(数论)
qbxt Day 4 morning --2020.1.20 济南 主讲:李奥 目录一览 1.一些符号与基本知识 2.拓展欧几里得,逆元与欧拉定理 3.线性筛法与积性函数(非重点) 总知识点:数论 一 ...