js-高级（1）

葫芦哥GourdDoll
35 阅读9分钟

this指向

详见：《javascript设计模式与开发实践》 曾探写的、该内容非常不错；

this的指向大致可以分为这几种：谁调用就指向谁

  • 全局作用域中：指向全局对象window

  • 作为全局作用域中函数调用：指向全局对象window

  • 严格模式( "use strict";)：是undefined

  • 作为对象中方法被调用：指向该对象

  • this === e.target

  • 作为构造函数调用：

  • 构造函数是否返回一个对象？

  • 是：这种情况最终会返回这个对象，而不是我们之前期待的this，这种情况在构造函数中this也都是指向的该类的实例，不过没有什么意义了。

  • 否：指向该类的实例

  • 其他情况

  • 在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

  • call、apply和bind

这几种方式，使用构造器调用模式的优先级最高，然后是 apply 、 call 和 bind 调用模式，然后是方法调用模式。

call、apply&bind

三者都是用来改变函数this指向的；

call和apply的区别：

  • call接受参数列表，apply接受参数数组。
  • call和apply是在调用的时候指定this的指向，bind是在定义的时候改变this的指向。bind返回的是一个新的函数。

call、apply&bind实现的原理

  • 普通函数实现方式：df-web：js-tools\尚硅谷工具函数-李强\src\function
  • 原型对象函数实现方式：df-web：interview\Front-End-Interview-Notebook-master\JavaScript\JavaScript.md 【97】

原理：给指定的对象设置一个临时变量，将函数赋值成这个变量成为该对象的一个方法，执行该方法，删除这个临时属性；如果是原型对象函数实现方式，需要注意实现函数内部中的this就是需要处理的这个函数，相当于链式调用嘛；

常见应用：

1.Math.max() 改变参数形式

// 接受平铺式参数
Math.max(1,2,3)

// 而实际中往往是数组数据
// 可以利用apply做一个变形
Math.max.apply(null,[1,2,3])

// 不过es6的解构符更好用
Math.max(...[1,2,3])

链式调用

本质就是利用【方法中的this是谁调用就是指向谁】

var Person = function() {};
Person.prototype.set = function (age){
    this.age = 10; 
    return this; //this调用位置决定其词法作用域
}
Person.prototype.get = function (){
    return '我还是个少年'
}

var person = new Person();
person.set(10).get(); // '我还是个少年'

面试题

var value = 1;

var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}

//示例1
console.log(foo.bar()); // 2
//示例2
console.log((foo.bar)()); // 2
//示例3
console.log((foo.bar = foo.bar)()); // 1
//示例4
console.log((false || foo.bar)()); // 1
//示例5
console.log((foo.bar, foo.bar)()); // 1

this在setTimeout中的表现

参考：

使用function函数时，setTimeout中函数内的this是指向了window对象；

setInterval同理。

解决方式：

  • 方式一：用个that暂存this
  • 方式二：es6中的箭头函数

执行上下文与执行上下文栈(调用栈)

  • 理解:

  • 执行上下文: 由js引擎自动创建的对象, 包含对应作用域中的所有变量属性。

  • 执行上下文栈(调用栈): 用来管理多个执行上下文的一种数据结构。

  • 执行上下文是动态创建的，函数每调用一次就会创建一个执行上下文。

  • 分类:

  • 全局执行上下文: window

  • 函数执行上下文: 对程序员来说是透明的，函数执行时会创建函数上下文，执行结束后会被销毁

  • eval函数执行上下文

  • 生命周期:

  • 全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡

  • 函数 : 调用函数时产生, 函数执行完时死亡

  • 包含哪些属性:

  • 全局 :

  • 用var定义的全局变量 ==>undefined

  • 使用function声明的函数 ===>function

  • this ===>window

  • 函数:

  • 用var定义的局部变量 ==>undefined

  • 使用function声明的函数 ===>function

  • this ===> 调用函数的对象, 如果没有指定就是window

  • 形参变量 ===>对应实参值

  • arguments ===>实参列表的伪数组

  • 执行上下文创建和初始化的过程

  • 全局:

  • 在全局代码执行前最先创建一个全局执行上下文(window)

  • 收集一些全局变量, 并初始化

  • 将这些变量设置为window的属性

  • 函数:

  • 在调用函数时, 在执行函数体之前先创建一个函数执行上下文

  • 收集一些局部变量, 并初始化

  • 将这些变量设置为执行上下文的属性

执行上下文一共有三个属性：变量对象、作用域链、this指针。

调用栈就是用来管理函数调用关系的一种数据结构。

JavaScript 引擎正是利用栈的这种结构来管理执行上下文的。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。

作用域&作用域链

在ES5中，只有函数作用域，没有块级作用域；也就是说，if/for等有{}的结构体，并不能具备自己的作用域。

ES6中let和const的设计就是为了解决这个问题。

  • 理解

  • 作用域: 一块代码区域, 在编码时就确定了, 不会再变化

  • 作用域链: 多个嵌套的作用域形成的由内向外的结构, 用于查找变量

  • 分类

  • 全局作用域

  • 函数作用域

  • js没有块作用域(在ES6之前)

  • 作用

  • 作用域: 隔离变量, 可以在不同作用域定义同名的变量不冲突

  • 作用域链: 查找变量

  • 区别作用域与执行上下文

  • 作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了；

  • 执行上下文: 动态的, 执行代码时动态创建, 函数调用结束时就会自动释放；

  • 联系: 执行上下文(对象)是从属于所在的作用域；

看下面几个例子：

函数：

console.log(a)
function a(){
}
// 结果是[Function: a],  这是因为函数这样定义会被移到文档最前,并不会出现undefined

var a = 1
function a(){}

console.log(a); //结果是1

var a = 1
a =function (){}

console.log(a); //[Function: a]

for：

// for循环条件中定义的var变量
for(var i = 0; i< 10;i++){
}
console.log(i); // 10

// for循环循环体中定义的var变量
for(var i = 0; i< 10;i++){
  var aaa = 1000
}
console.log(aaa); // 1000

!!!还有一个列子需要闭包特殊处理才能解决。

函数提升与变量提升

  • 变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined)

  • 函数提升: 在函数定义语句之前, 就声明了该函数

  • 先有变量提升(变量声明的提升，而不是赋值), 再有函数提升--就是说变量会提升到函数前面，不论顺序，从而变量会被函数覆盖；

提升的时机

发生在js解析时。

js代码解析时，js分为解释和运行两个部分；

这里我们需要注意的一点是， JavaScript 引擎解析执行代码的过程是一个边执行边解析的过程，解析发生在执行一段可执行代码之前。举个例子，当执行到一个函数的时候，就会先对这个函数进行解析，然后再执行这个函数。

函数的定义方式

在js中函数有两种定义方式。

简单来说：函数定义会被声明到文档最前。

声明式：

情况1：
var a = function(){}   //声明给一个变量
a()

情况2：
a() // 报错
var a = function(){}

定义式：

function a(){} // 直接定义
a()

这两种方式关键的地方：

  • 直接定义会被提升到文档最前，这是非常要注意的地方。
  • 声明式和变量声明差不多，变量会被提升到文档前，而后复制。

先有变量提升再有函数提升

也是说：函数提升会覆盖重名的变量提升

//我们可以在把这个log放在各种位置测试，
// 变量和函数提升之间的顺序并不是按代码顺序提升的；

// demo1 log: [Function: a]
console.log(a);

function a() {}
var a = 1

// demo2 log: 1
showName()
var showName = function () {
  console.log(2)
}
function showName() {
  console.log(1)
}

// demo3 log: 1
showName()
function showName() {
  console.log(1)
}
var showName = function () {
  console.log(2)
}

暂时性死区

对于let和const而言：在初始化之前使用会出现暂时性死区；

let myname = '极客时间'
{
    console.log(myname)
    let myname = '极客邦'
}

// log: VM6277:3 Uncaught ReferenceError: Cannot access 'myname' before initialization

【分析原因】：在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。

【拓展】

  • var的创建和初始化被提升，赋值不会被提升。

  • let的创建被提升，赋值和初始化不会被提升。

  • function的创建、赋值和初始化均会被提升。

作用域链

  1. 理解

  • 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)

  • 查找变量时就是沿着作用域链来查找的

  1. 查找一个变量的查找规则

  • 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2

  • 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3

  • 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。

作用域链的创建过程跟执行上下文的建立有关；

词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。词法作用域是代码编译阶段就决定好的，和函数是怎么调用的没有关系。

作用域链是根据词法作用域生成的，与函数怎么调用没有关系；

avatar
文章
阅读
粉丝