今天在控制台写删除数组第一个元素的代码时,发现了一个问题,以下是书中源码,

let arr = [1,2,3,4,5]
Array.prototype.reIndex = function (myArray) {
const newArray = [];
for (let i=0; i<myArray.length; i++) {
if (myArray[i] !== undefined) {
newArray.push(myArray[i]);
}
}
return newArray;
}
Array.prototype.removeFirPos = function () {
for (let i=0;i<this.length;i++){
this[i] = this[i+1]
}
return this.reIndex(this)
} arr = arr.removeFirPos() console.log(arr)//控制台输出

按这个源码,我进行了更改,使用了箭头函数,如下

let arr = [1,2,3,4,5]
Array.prototype.reIndex = (myArray) => {
const newArray = [];
for (let i=0; i<myArray.length; i++) {
if (myArray[i] !== undefined) {
newArray.push(myArray[i]);
}
}
return newArray;
}
Array.prototype.removeFirPos = () => {
for (let i=0;i<this.length;i++){
this[i] = this[i+1]
}
return this.reIndex(this)
} arr = arr.removeFirPos() console.log(arr)//控制台输出

然后发现报错,typeerror:this.reIndex is not a function。查找下发现箭头函数没有自己的this。

我又想了一下,变量arr调用方法removeFirPos(),那么这个this不就是指向了arr吗,后来一想。。。这不是非箭头函数时候的指向嘛

然后继续网络查找找到了一句话:由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值

所有this的指向在非严格模式下是window。为了更好的理解我编写以下代码

function Test1() {
console.log(this);
setTimeout(() => {
console.log('这是箭头函数',this)
})
} function Test2() {
console.log(this);
setTimeout(function () {
console.log('这是普通函数',this)
})
}
let t1 = new Test1()
let t2 = new Test2()

输出结果如下

VM90:2 Test1 {}
VM90:9 Test2 {}

VM90:4 这是箭头函数 Test1 {}
VM90:11 这是普通函数 Window {window: Window, self: Window, document: document, name: "", location: Location, …}

原因是箭头函数捕获的是其所在上下文中的this值,而由于setTimeout()调用的代码运行在所在函数完全分离的执行环境上,this指向的是window(其实我也没咋明)

到这基本原因就明确了。

后面在我查找知识的时候,发现了let和var声明的不同,贴下人家的代码,这是在知乎找的(https://zhuanlan.zhihu.com/p/149239478)

var bar = {
myName:"bar",
printName: function () {
console.log(myName)
}
}
let myName = "global"
let _printName = bar.printName
_printName() // global
bar.printName() // global

对于这个代码都比较好理解,前面全局变量bar,myName,_printName的声明,然后_printName声明这行,bar.printName是一函数,让变量_printName执行了这一函数

然后在全局作用域下直接调用了函数,则输出的myName将在全局域中查找为global;最后一行相同原理

然后对代码稍加更改

var bar = {
myName:"bar",
printName: function () {
console.log(this.myName)
}
}
let myName = "global"
let _printName = bar.printName
_printName() // undefined
bar.printName() // bar

仍然是_printName变量执行函数bar.printName,这次执行时因为是全局作用域下,输出的应该是window.myName。这下问题出来了,全局作用域下不是有myName吗

非也,起初我也迷惑,但后来代码放在控制台跑一下,发现其实let声明变量的作用域并非全域,而是在script域中,也就是说全域并没有myName这一变量,故输出undefined

bar调用函数printName执行,则执行环境在bar块作用域中,故输出bar

萌新小白,请教

 

let声明的全局变量不是window对象属性的更多相关文章

  1. 全局变量都是window对象的属性

    var x = "haha"; var test  = function(){ alert(this.x); } 上述,则会弹出 haha的值. 因为在JavaScript的变量作 ...

  2. javascript window对象属性和方法

    window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...

  3. window对象属性alert、confirm、prompt怎么使用?

    window对象属性alert.confirm.prompt怎么使用? 一.总结 1.参数依次复杂,返回值依次复杂,但是感觉都是一一继承的,所以很好想也很好写. 二.window对象alert.con ...

  4. JavaScript Window对象属性

    window 代表浏览器中一个打开的窗口. Window的属性 属性 描述 closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dia ...

  5. 【repost】js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  6. 使用BOM 的window对象属性打开新窗口

    ★  示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> & ...

  7. Window对象属性

    2018-11-28 12:21:20

  8. Window对象

    Window对象:         Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框 ...

  9. 第十二章:window对象

    第十一章介绍了window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一 ...

随机推荐

  1. 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA

    下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...

  2. Docker镜像仓库Harbor部署

    一.Harbor组件 组件 功能 harbor-adminserver 配置管理中心 harbor-db Mysql数据库 harbor-jobservice 负责镜像复制 harbor-log 记录 ...

  3. firewalld和iptables区别

    在RHEL7里有几种防火墙共存:firewalld.iptables.ebtables,默认是使用firewalld来管理netfilter子系统,不过底层调用的命令仍然是iptables等. fir ...

  4. 第4天 | 12天搞定Python,基础语法(下)

    为了方便你的学习,减轻负重,我特意将基础语法分成上下两部分.希望你喜欢这种方式,如果不喜欢,你可以跟我说,反正我是不会改的,哈哈~~. 如果上部分,你还没看的话,先去看<第4天 | 12天搞定P ...

  5. 用算法去扫雷(go语言)

    最初的准备 首先得完成数据的录入,及从扫雷的程序读取界面数据成为我的算法可识别的数据 其次是设计扫雷的算法,及如何才能判断格子是雷或者可以点击鼠标左键和中键. 然后将步骤2的到的结果通过我的程序实现鼠 ...

  6. canal 整合RabbitMQ

    环境如下: canal: 1.15-alpha-1 mysql  5.6.49 rabbitmq 3.7.14 Erlang 21.3 canal 安装和启动 见上篇文章 canal快速安装启动 但是 ...

  7. 实现LNMP架构

    LNMP简介 WEB资源类型: 静态资源:服务器端和客户端看到的是一样的 动态资源:服务器端放的是程序,客户端看到的是结果,并不是程序本身 和页面的静或者动没有关系 WEB相关语言 HTML JAVA ...

  8. APP反编译Xposed-Fdex2脱壳

    1.首先手机安装Xposed(app) 2.安装Fdex2(app) 3.打开Fdex2 4.点击要脱壳的app 5.adb pull (点击脱壳app时候弹出的来的路径) 保存本地路径 6.完结-. ...

  9. servlet post response.sendRedirect 乱码

    response.sendRedircet一般用于传递字符串参数 常会出现乱码: 情景1: post表单提交,跳转后的servlet,通过getParameter(name)进行解码,获取的中文乱码 ...

  10. window.open浏览器弹出新窗口被拦截—原因分析和解决方案

    最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,在本机实验没问题,到了服务器就被拦截了,火狐有拦截提示,360浏览器拦截提示都没有,虽然在自己的环境可以对页面进行放行,但是对用户 ...