JS面试题第二章

ES6语法

比较var let const

var有什么问题?

1.声明提升
javascript 复制代码
console.log(num); // undefined
var num = 123

这样应该是报错会更好

所以,let这样操作会直接报错

javascript 复制代码
console.log(num);
let num = 123
// 报错
2.变量覆盖
javascript 复制代码
    var num1 = 123
    var num1 = 1234
    console.log(num1);  // 1234
    // 2.变量覆盖
javascript 复制代码
    let num2 = 123
    let num2 = 1234
    // 报错
    // let 不允许变量覆盖
3.var没有块级作用域
javascript 复制代码
    function f2() {
        for (var i = 0; i < 3; i++) {
            console.log(i);
        }
        console.log(i);
    }
    f2()

const

特性:

  • 定义常量,值不能修改

  • const 声明了值一定要赋值

  • let的属性const都支持

  • 全局常量一般大写

快速去重的方法

ES6之前

使用两个传统的for循环

而ES6可以,利用集合

javascript 复制代码
    let arr = [12, 43, 43, 123, 12, 55]
    let item = [...new Set(arr)]
    // 利用集合
    console.log(item);

Promise

javascript 复制代码
    const promise = new Promise((resolve, reject) => {
        console.log(1);
        resolve()
        console.log(2)
    })
    promise.then(() => {
        console.log(3);
    })
    console.log(4);

输出是 1243

因为promise构造函数的方法同步执行

而.then异步执行

闭包

什么是闭包?

闭包就是__方法里面有一个方法

javascript 复制代码
function a() {
    function b() {
        let a = 1
        return function () {
            console.log(a)
        }
    }
}

闭包的意义何在?

1.延长变量的生命周期

2.创建私有环境

javascript 复制代码
let name = "admin"
function fn1() {
    let b = 1
    console.log(name);
}
// console.log(b);  报错
fn1()

JS的执行机制

JS运行的时候会生成一个临时的变量对象.AO(active object)

运行的时候会把所有的变量和临时的方法都放进去,全局变量不在这个里面

1.函数执行完之后,AO销毁

2.函数执行完之后,AO销毁,但是临时的方法还在

3.函数执行完之后,AO销毁,但是临时的方法还在,但是临时的方法里面有变量,这个变量还在

作用域链

javascript 复制代码
 let name = "小明"
    function fn2() {
        let name = "小白"
        function fn1() {
            let name = "小红"
            console.log(name);
        }
        fn1()
    }
    fn2()  // 小红
    // 函数抱着函数就形成了作用域链,就近原则
    // 一层一层的向外找

其实,闭包就是桥梁,所谓沟通内外部方法的桥梁

javascript 复制代码
 function outer() {
        let a1 = 111
        let a2 = 222
        return function inner() {
            return a1
        }
    }
    function h5() {
        let num = outer()
        console.log(num); // 不会输出
        // 为什么不建议定义全局变量
        // 1. 污染全局变量
        // 2.全局变量不会被垃圾机制所回收
    }

闭包的问题

闭包会常驻内存,所以要慎用

闭包的应用

Vue中的data()为什么是一个函数,实际上就是一个闭包的设计,Vue中会有很多对应的组件,每一个组件都有一个data,保证了各个组件之间都拥有了一块私有的作用域。

如果不用闭包,各个组件之间就会干扰,这就是闭包的作用

私有作用域

javascript 复制代码
 let makeCounter = function () {
        let num = 0
        function changeBy(val) {
            num += val
        }
        return {
            add: function () {
                changeBy(1)
            },
            reduce: function () {
                changeBy(-1)
            },
            get: function () {
                return num
            }
        }
    }
    // 一个经典的闭包的私有作用域应用
    let counter1 = makeCounter()
    let counter2 = makeCounter()
    console.log(counter1.get());
    counter1.add()
    counter2.add()
    counter1.add()
    console.log(counter1.get());
    console.log(counter2.get());
    // 他们俩都有各自独立的作用域

原型链与继承

原型是什么?

原型是prototype

原型链是什么?

原型链是什么 proto 谷歌浏览器上 是[[prototype]]

javascript 复制代码
// 常规对象上没有原型
let obj = {}
let list = []
obj.prototype.a = 56
list.prototype[0] = 123
// 对象和数组上没有

原型是函数上特有的

javascript 复制代码
// 原型是函数上特有的
function fn() {

}
fn.prototype.name = "cc"
fn.prototype.fn2 = function () {
    console.log("fn2")
}
/**
 * 原型是函数特有的
 * 为什么要在函数原型上挂载东西
 * 为了继承
 */

原型链是大家都有的

原型链,原型,继承三者的关系

javascript 复制代码
// 不是构造函数
    function Person() {

    }
    Person.prototype.name = "cc"
    Person.prototype.age = 18
    Person.prototype.say = function () {
        console.log(this.age)
    }
    let person1 = new Person()
    /**
     * new一个东西的时候才是叫做构造函数
     * 通过new关键字继承了它的原型属性和方法
     * person1就是Person构造函数的实例
     */
    console.log(person1.name);  // cc
    /**
     * 首先从当前实例属性去找
     * 如果找到了就返回
     * 否则就沿着原型链一层一层网上找
     * 知道找到了null为止
     * 如果找到null还没找到就会报错
     */

    /**
     * 还有一个问题
     * 自身也有属性,父类也有属性
     * 它怎么判断呢?
     * 它会通过一个forin去循环整个对象
     * 对象本身就有一个方法hasOwnPropery
     */
    person1.name = "自己的"
    console.log(person1.name); // 自己的
    // 这样子就能查到私有属性
    let item
    for (item in person1) {
        if (person1.hasOwnProperty(item)) {
            console.log(item);
        }
    }
    /**
     * 问题是自己没有这个hasOwnPropery方法
     * 父类也没有这个方法
     * 这个方法从哪里来的?
     * 这个是他爹的爹Object上的方法
     * Object.hasOwnProperty
     * 它爹直接继承Object
     */

    /**
     * 总结:被构造的东西,它的原型链指向的是构造他的方法的原型
     */
相关推荐
天天向上102412 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人13 分钟前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
芬兰y28 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁34 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry34 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录36 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟36 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan41 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript