前言


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,而letconst声明的变量不会

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

显式绑定

callapplybind等显式改变this指向。

注意:非严格模式下,callapplybind等传入nullundefined会默认转为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:多次使用bindthis只会指向第一次bindthis

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操作符会产生如下步骤:

  1. 创建一个新的空对象。
  2. 将新对象与构造函数的prototype相连。
  3. 新对象绑定带构造函数的this
  4. 如果构造函数有返回值,且返回值是对象,则返回构造函数的返回值,否则返回新建的对象。
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;
}

箭头函数


箭头函数比较特殊,它有以下几个特点:

  1. 没有自身的this,在定义时默认绑定父级作用域的this,即采用词法作用域绑定this.

  2. 没有原型 prototype,无法使用 new 操作符,即不能作为构造函数.

  3. 无法使用callapplybind等显式改变其this.

    const test = () => console.log(this);
    let obj = {}; test(); // window
    test.call(obj); // window const foo = test.bind(obj);
    foo(); // window

javascripts的this的更多相关文章

  1. JavaScripts基础

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  2. HTML JavaScripts

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...

  3. javascripts学习笔记(五):用js来实现缩略语列表、文献来源链接和快捷键列表。

    1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如: <p> The <abbr title="World Wide Web Consortium"> ...

  4. FW: javascripts 要不要加引号

    Javascript编程风格  http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html 作者: 阮一峰 日期: ...

  5. JavaScripts 基础详细笔记整理

    一.JS简介 JavaScript 是 Web 的编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理 ...

  6. javascripts 实习自动提交表单 onsubmit

    html: <form id="formwb" onsubmit="return setPassword();"> <script> d ...

  7. JavaScripts学习日记——XML DTD Schema

    今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...

  8. JavaScripts学习日记——DOM SAX JAXP DEMO4J XPath

    今日关键词: XML解析器 DOM SAX JAXP DEMO4J XPath XML解析器 1.解析器概述 什么是解析器 XML是保存数据的文件,XML中保存的数据也需要被程序读取然后使用.那么程序 ...

  9. JavaScripts学习日记——DOM

    DOM Document Object Model 文档对象模型  整合js和html css.控制html文档行为.DOM就是把页面当中所有内容全部封装成对象.HTML文档中万物皆对象.1.对象的分 ...

  10. JavaScripts学习日记——BOM

    IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执 ...

随机推荐

  1. 容器监控工具WeaveScope

    最近一段时间整了一些docker容器,弄了一些基于docker的微服务通信,弄好一套服务系统之后,对于服务的性能,基础数据的监控就显的很重要, 不然就是两眼一抹黑了,要不就是维护成本很高,这些都不符合 ...

  2. 现在连Linux都搞不懂,当初我要是这么学习操作系统就好了!

    原创声明 本文首发于微信公众号[程序员黄小斜] 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 本文思维导图 简介 学习编程,操作系统是你必须要掌握的基础知识,那么操作系统到底是什么呢? 这还 ...

  3. SQLyog12.08详细安装教程

    SQLyog安装教程 一.软件下载 为了更好的学习,我们需要可视化界面,而不仅仅是通过命令行黑窗口管理数据库.SQLyog 就是一个快速而简洁的图形化管理MYSQL数据库的工具. SQLyog12.0 ...

  4. mysql数据库技术1——基本的增删查改的sql语句

    1.数据库语言的分类 DDL:数据库定义语言 data Definition language 用于创建.修改.和删除数据库内的数据结构,如: 1:创建和删除数据库(CREATE DATABASE | ...

  5. JAVA 增删改查接口命名规范(dao层与 service 层

    开发时,有很多规范,这里写的是命名规范. Dao 接口命名   insert batchInsert selectOne selectById count selectList update dele ...

  6. Python基础之基础知识

    目录 Python基础知识 Python 变量 Python 字符编码 Python 二进制 Python 十六进制 Python bytes Python 注释 Python 用户输入 Python ...

  7. 你为什么不来了解一下Python?

    一.什么是Python Python [1](英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum发明. ...

  8. 转载整理:SublimeText3 Emmet失效问题以及win7 pyV8安装问题

    SublimeText3 Emmet安装问题网上已经很多帖子了,这个简单,主要对win7 64位我本人遇到的Emmet好多快捷功能无法用(比如ul>li*4  Tab无法生成)问题做了整理!搜了 ...

  9. mysql必知必会--MySQL简介

    什么是MySQL MySQL已经存在很久了,它在世界范围内得到了广泛的安装和使用. 为什么有那么多的公司和开发人员使用MySQL?以下列出其原因. 成本--MySQL是开放源代码的,一般可以免费使用( ...

  10. 不用循环游标,一句update代码实现滚动计算

    发现一段经典SQL,不用循环游标,一句update代码实现滚动计算结存.为方便理解,结合实例测试之 --1,源数据#t1,jcshl初值为每个sid的当前库存数量,要实现的效果:每个sid的后一结存数 ...