JS从看懂到看开（前端面试题整合）-阿里云开发者社区

解释一下为何[ ] == ![ ] // ---> true

首先看一张图

！[ ] 是 false

原式：[ ] == false

根据第八条，false通过tonumber（）转换为0

原式：[ ] == 0

根据第十条，[ ]通过ToPrimitive()转换为' '

原式：' ' == 0

根据第六条

原式：0 == 0

尝试实现new

        function ObjectClass() {//对象
            console.log(arguments[0])
        }
        ObjectClass.prototype.constructor = ObjectClass
        function create() {
            // 创建一个空的对象
            var obj = {}
            // 获得构造函数
            var _constructor = this
            // 链接到原型
            obj.__proto__ = _constructor.prototype
            // 绑定 this，执行构造函数
            var result = _constructor.apply(obj, arguments)
            // 确保 new 出来的是个对象
            return typeof result === 'object' ? result : obj
        }
        create.call(ObjectClass, 'hello world')//实例化

拓展typeof功能使其支持更多类型（array，object，null区分），并解释一下typeof null为何是object

        function myTypeOf(target) {
            var _type = typeof (target)
            var temp = {
                "[object Object]": 'object',
                "[object Array]": 'array',
                "[object Number]": 'number',
                "[object String]": 'string',
                "[object Boolean]": 'boolean'
            }
            if (target === null) {
                return 'null'
            } else if (_type == 'object') {
                var str = Object.prototype.toString.call(target)//根据toString区分
                return temp[str]
            } else {
                return _type
            }
        }
        console.log(myTypeOf('hello')) //string
        console.log(myTypeOf(111)) // number
        console.log(myTypeOf(true)) // boolean
        console.log(myTypeOf({})) // object
        console.log(myTypeOf([])) // array
        console.log(myTypeOf(null)) // null
        console.log(myTypeOf(undefined)) // undefined
        console.log(myTypeOf(Symbol())) // symbol

typeof null为何是object

因为在早期js初版本中，操作系统使用的是32位，出于性能考虑，使用低位存储变量类型，object的类型前三位是000，而null是全0，从而系统将null误判为object

instanceof是什么？尝试实现一下

用官话来讲：instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

通俗来讲，a instanceof b也就是判断a是否是由b实例化得来的

实现：

        function ObjectClass() {}
        ObjectClass.prototype.constructor = ObjectClass
        var _objectClass = new ObjectClass()
        function myInstanceof(orgProto, tag) { //org前者，实例化对象, tag后者，类
            var tagProto = tag.prototype
            orgProto = orgProto.__proto__
            for (;;) { //死循环查询原型链上是否有类的原型
                if (orgProto === null) {
                    return false
                }
                if (orgProto === tagProto) {
                    return true
                }
                orgProto = orgProto.__proto__
            }
        }
        console.log(myInstanceof(Object, Function)) // true
        console.log(myInstanceof(Object, Object)) // true
        console.log(myInstanceof(String, Object)) // true
        console.log(myInstanceof(_objectClass, Object)) // true
        console.log(myInstanceof(String, String)) // false
        console.log(myInstanceof(Boolean, Boolean)) // false

解释以下代码分别在控制台显示什么，并简单说明

有一个对象Car，分别对以下四种情况进行作答

Car.prototype.name = 'BMW'
function Car() {}

1.实例化对象时打印BMW，因为Car.prototype.name = 'BMW'，实例化的car本身没有name属性，于是会在Car的原型上找。此时将Car.prototype.name = 'Benz'，实例化后的car.name也会等于Benz，因为name是基本数据类型（原始值），当值发送变化，实例化后的对象也会改变

        var car = new Car()
        console.log(car.name) //BMW
        Car.prototype.name = 'Benz'
        console.log(car.name) //Benz

2.实例化对象时打印Benz，因为在实例化之前就已经改变构造函数原型上的name值

        Car.prototype.name = 'Benz'
        var car = new Car()
        console.log(car.name) //Benz

3.第一个log的BMW与上述一样，第二个log依然打印BMW的原因是，这里将Car.prototype直接改变成另一个对象，由于对象是引用数据类型（引用值），指向的是内存地址而不是值，new之前和new之后的实例对象引用的name地址不同

        var car = new Car()
        console.log(car.name) //BMW
        Car.prototype = {
            name: 'Benz'
        }
        console.log(car.name) //BMW

4.和上述相同，原因是修改了prototype，改变的是引用地址，new之前和new之后的实例对象引用的name地址不同

        Car.prototype = {
            name: 'Benz'
        }
        var car = new Car()
        console.log(car.name) //Benz

写一个函数，计算字符串Unicode总长度（例如：abcd，打印4，qwerdf，打印6）

需要注意的是，英文字符占1个字节，中文字符占两个字节

        function unicodeLength(str) {
            for (var i = 0, count = 0; i < str.length; i++) {
                console.log(str.charCodeAt(i))
                if (str.charCodeAt(i) > 255) { //中文字符
                    count += 2
                } else { //英文字符
                    count++
                }
            }
            return count
        }
        console.log(unicodeLength('hello，1024，你好')) //17

实现一下js中window自带的isNaN()函数

注意点：如果直接使用NaN==NaN来判断，会返回false，需要将NaN转换成字符串，再来判断

        isNaN('asda') //window下的原函数
        console.log(isNaN(13)) //false
        console.log(isNaN('aaa')) //true
        function myIsNaN(number) {
            return "" + Number(number) == "NaN" ? true : false
        }
        console.log(myIsNaN(32323)) //false
        console.log(myIsNaN('aaa')) //true

实现数组push()方法

        function myPush() {
            for (var i = 0; i < arguments.length; i++) {
                this[this.length] = arguments[i]
            }
            return this.length
        }
        Array.prototype.myPush = myPush
        var list = [1, 2, 3, 4, 5]
        var item = 6
        console.log(list.myPush(item)) //6
        console.log(list) //[1, 2, 3, 4, 5, 6]

实现数组乱序（提示：使用Array.sort）

Array.sort((a,b)=>{})中a-b升序，b-a降序

        Array.prototype.random = random
        function random() {
            this.sort(function () {
                return Math.random() - 0.5
            })
            return this
        }
        var list = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(list.random())//[3, 2, 6, 4, 9, 8, 1, 5, 7] 结果每次都不同

以下代码在控制台显示什么？说明原因

        var obj = {
            "0": 'a',
            "1": 'b',
            "2": 'c',
            "length": 3,
            "push": Array.prototype.push
        }
        obj.push(1, 2, 3)
        console.log(obj)

打印结果是

原因：说明原因之前先看一段Array.prototype.push的源码：

function ArrayPush () {  
var n = TO_UNIT32(this.length);  
var m = %_ArgumentsLength();  
for (var i = 0; i < m; i++) {
    this[i + n ] = %_Arguments(i);
  }  this.length = n + m;
  return this.length;
}

push的原理是在原对象后面将push的内容遍历进去，获取this.length并且在此基础上加上push的个数，这就不难解释为何push了三个数后length为6

解释以下代码打印为undefined的原因

        var num = 123;
        num.item = 'abc'
        console.log(num.item) //undefined

第一步：var num = 123

第二步：num.item = 'abc'//隐式转换，相当于new Number(num).item = 'abc'（包装类生成引用类型数据），此时底层会判定此时的num是原始值，不存在属性值，所以执行delete（num.item）

第三步：打印undefined

使用JS原生实现function中的call，apply，bind函数

call:

        Function.prototype.myCall = function () {
            var _this = arguments[0] || window; //第一项是需要this指向的对象
            _this._function = this //this是要执行的函数，改变指向为_this
            var args = [] //把除this之外的所有参数放在args中
            for (var i = 1; i < arguments.length; i++) { //i = 1，第二项到最后一项是参数
                args[i - 1] = arguments[i]
            }
            return eval("_this._function(" + args + ")") //eval能将数组隐式拆分，效果与join相似，但二者区别很大，return将函数执行结果返回
            delete _this._function //执行完成后删除当前_function,这个_function用来放this
        }
        var a = 'window'
        var obj1 = {
            a: 'obj1',
            fn: function () {
                console.log(this.a)
                console.log(arguments)
            }
        }
        var obj2 = {
            a: 'obj2'
        }
        obj1.fn.myCall(obj2, 1, 2, 3, 4) //obj2  arguments[1, 2, 3, 4]
        obj1.fn.myCall(this, 3, 2, 1) //window  arguments[3, 2, 1]

apply（调用上面的myCall实现即可）:

        Function.prototype.myApply = function () {
            var _this = arguments[0] || window; //第一项是需要this指向的对象
            _this._function = this //this是要执行的函数，改变指向为_this
            return eval("_this._function.myCall(_this, " + arguments[1] + ")") //eval能将数组隐式拆分，效果与join相似，但二者区别很大，return将函数执行结果返回
            delete _this._function //执行完成后删除当前_function,这个_function用来放this
        }
        var a = 'window'
        var obj1 = {
            a: 'obj1',
            fn: function () {
                console.log(this.a)
                console.log(arguments)
            }
        }
        var obj2 = {
            a: 'obj2'
        }
        obj1.fn.myApply(obj2, [1, 2, 3, 4]) //obj2  arguments[1, 2, 3, 4]
        obj1.fn.myApply(this, [3, 2, 1]) //window  arguments[3, 2, 1]

bind（继续调用上面myApply）:

        Function.prototype.myBind = function () {
            var t = this;
            var _this = arguments[0] || window; //第一项是需要this指向的对象
            var args = Array.prototype.slice.myApply(arguments, [
                1], ) //这项的目的是为了去除第一项arguments[0]，就与上面的myCall中的遍历作用相同，Array.prototype.slice传一个参数，slice(start,end)表示删除第start到end项并返回删除后的数组，这里我们只用截取，不用删除，这里是删除第一项（由于用的是myApply，第二个参数是数组所以用[1]）并返回删除后的数组
            return function () {
                return t.myApply(_this, args)
            }
        }
        var a = 'window'
        var obj1 = {
            a: 'obj1',
            fn: function () {
                console.log(this.a)
                console.log(arguments)
            }
        }
        var obj2 = {
            a: 'obj2'
        }
        obj1.fn.myBind(obj2, 1, 2, 3, 4)() //obj2  arguments[1, 2, 3, 4]
        obj1.fn.myBind(this, 3, 2, 1)() //window  arguments[3, 2, 1]

对mvvm，mvp和mvc的理解

Model–View–ViewModel(MVVM)，Model-View-Presenter（MVP）和Model–View-Controller（MVC）都是软件架构设计模式

相同的地方

Model 是指任何一个领域模型(domain model)，一般做数据处理，可以理解为数据库，用来存放应用的所有数据对象。模型不必知晓视图和控制器的细节，模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模版，以及那些和模型无关的逻辑都应当隔离在模型之外，它代表了真实情况的内容（一个面向对象的方法），或表示内容（以数据为中心的方法）的数据访问层

View就是用户界面（UI），视图层是呈现给用户的，用户与之产生交互。在javaScript应用中，视图大都是由html、css和JavaScript模版组成的。除了模版中简单的条件语句之外，视图不应当包含任何其他逻辑。事实上和模型类似，视图也应该从应用的其他部分中解耦出来

不同的地方

MVC的Controller控制器是模型和视图的纽带。控制器从视图获得事件和输入，对它们进行处理，并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交和按钮单击。然后当用户和应用产生交互时，控制器中的事件触发器就开始工作。

MVVM的ViewModel是一个公开公共属性和命令的抽象的view。取代了 MVC 模式的 controller，或 MVP 模式的任命者(presenter)，MVVM 有一个驱动。在 viewmodel 中，这种驱动传达视图和数据绑定的通信。此 viewmodel 已被描述为该 model 中的数据的状态。

MVP的Presenter负责逻辑的处理，在MVP中View并不直接使用Model，它们之间的通信是通过Presenter来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过Controller。

谈谈对前端页面渲染的理解（过程，原理，性能，重绘和回流）

页面渲染分为以下步骤

1. 处理HTML语句标签并构建 DOM 树

2. 处理CSS语句并构建CSSOM树

3. 将处理好的DOM与CSSOM合并成一个渲染树

4. 根据渲染树来布局，计算每个节点的位置样式等等

5. 调 GPU（显卡）绘制页面，合成图层，最后显示在浏览器

在处理CSSOM时，会暂时堵塞DOM渲染，并且扁平层级关系有利于渲染速度，越详细的样式选择器，会导致页面渲染越慢

CSS加载会影响JS文件或语句加载，JS需要等待CSS解析完毕后运行

document中的DOMContentLoaded和Load的区别：前者只需HTML加载完成后，就会触发，后者需要等HTML，CSS，JS都加载完成才会触发

图层概念：普通文档流就是一个图层，特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用

以下CSS属性可以生成新图层：

3D 变换：translate3d、translateZ

will-change

video、iframe 标签

通过动画实现的 opacity 动画转换

position: fixed

重绘（Repaint）和回流（Reflow）

重绘是当节点需要更改外观而不会影响布局的，比如改变color就叫称为重绘回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。

回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

改变 window 大小

改变字体

添加或删除样式

文字改变

定位或者浮动

盒模型

如何减少重绘和回流

使用 translate 替代 top

使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）

把DOM离线后修改，比如：先把DOM给display:none（回流），然后你修改100次，然后再把它显示出来

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame

CSS 选择符从右往左匹配查找，避免 DOM 深度过深

将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

谈谈对前端继承的理解

原型链继承，子类实例继承的属性有，子类构造函数的属性，父类构造函数的属性，父类原型上的属性

缺点：无法向父类传参，当父类原型上的属性改变时，所以子类实例相对应的属性都会对应改变

        function Father() {
            this.name = "father";
            this.sex = "man"
        }
        Father.prototype.hobby = 'fish'
        function Son() {
            this.name = "son";
        }
        // 原型链继承
        Son.prototype = new Father()
        var son1 = new Son()
        var son2 = new Son()
        Father.prototype.hobby = 'dog' //缺点，修改父类prototype上的属性时，所有子类都会随之修改
        console.log(son1.hobby) // dog
        console.log(son2.hobby) // dog
        console.log(son1 instanceof Father) // true

构造函数继承（通过call，apply），子类可继承多个父类，可传参给父类

缺点：每个实例都有父类的构造函数，父类prototype上的属性无法继承

        // 构造函数继承（通过call，apply）
        function Father() {
            this.name = "father";
            this.sex = "man"
        }
        Father.prototype.hobby = 'fish'
        function Son(sex) {
            Father.call(this, sex) //可继承多个父类,但是每个实例都有父类的构造函数
            this.name = "son";
        }
        var son = new Son('woman')
        console.log(son.sex) //woman,可传参给父类
        console.log(son.hobby) //undefined，缺点，父类prototype上的属性无法继承
        console.log(son instanceof Father) // false

组合继承，上述两者的结合，解决了上面的缺点和问题（常用）

缺点：Father.call()和new Father()执行了两次父类构造函数，增加了性能损耗，父类的原型上的constructor指向了子类，此时需要在实例化父类（new Father）后在实例化子类（new Son）之前添加一句话：Father.prototype.constructor = Father

        // 组合继承
        function Father(sex) {
            this.name = "father";
            this.sex = sex
        }
        Father.prototype.hobby = 'fish'
        function Son(sex) {
            Father.call(this, sex) //可继承多个父类
            this.name = "son";
        }
        Son.prototype = new Father()
        Father.prototype.constructor = Father //解决父类的原型上的constructor指向了子类
        var son = new Son('woman')
        console.log(son.sex) //woman,可传参给父类
        console.log(son.hobby) //fish
        console.log(son instanceof Father) // true

原型式继承，和Object.create相似，通过函数进行继承，会继承父类所有属性

缺点：父类原型上的属性发生变化时，所有子类对应属性都会改变，子类无法直接修改属性，复用性较差

        // 原型式继承
        function Father() {
            this.name = "father";
            this.sex = 'man'
        }
        Father.prototype.hobby = 'fish'
        function Son() {
            this.name = "son";
        }
        function inherit(father) {
            function Fn() {}
            Fn.prototype = father;
            return new Fn() //类似于复制了father这个对象
        }
        var father = new Father()
        var son1 = inherit(father)
        Father.prototype.hobby = 'dog' //缺点，修改父类prototype上的属性时，所有子类都会随之修改
        var son2 = inherit(father)
        console.log(son1.sex) //man
        console.log(son1.hobby) //dog
        console.log(son2.hobby) //dog
        console.log(son1 instanceof Father) // true

寄生式继承，继承父类所有属性，并且可以添加子类自己的属性方法

缺点：代码复用率低

        function Father(sex) {
            this.name = "father";
            this.sex = sex //实例传参
        }
        Father.prototype.hobby = 'fish'
        function Son() {
            this.name = "son";
        }
        Object.prototype.myCreate = function (obj) {//实现Object.create
            function Fn() {}
            Fn.prototype = obj;
            return new Fn()
        }
        function inherit(father) {
            var _father = Object.myCreate(father)//克隆对象
            _father.getInfo = function () {//增强子类，修改属性，产生子类独有的方法和属性，但是耦合高，复用性差，不同子类的写法各不同
                console.log(_father.name)
                console.log(_father.hobby)
                console.log(_father.sex)
            }
            return _father;
        }
        var father = new Father('woman')
        var son = inherit(father)
        son.getInfo() //father，fish，woman

寄生式组合继承，继承父类所有属性，解决调用两次父类构造函数问题：一次是在创建子类型原型，一次在子类内部（理论上是最理想的继承）

        // 寄生式组合继承
        function Father(sex) {
            this.name = "father";
            this.sex = sex //实例传参
        }
        Father.prototype.hobby = 'fish'
        Father.prototype.getName = function () {
            console.log(this.name)
        }
        function Son(sex) {
            console.log(this.superClass) //Father
            Father.call(this, sex); //构造函数继承传递参数
            this.name = "son";
            this.hobby = "dog";
        }
        Son.prototype.getName = function () {
            console.log(this.name)
        }
        function Grandson(sex) {
            console.log(this.superClass) //Son
            Son.call(this, sex); //构造函数继承传递参数
            this.name = "grandson";
            this.hobby = "cat";
        }
        var inherit = (function () {
            function F() {} //使用闭包产生私有函数，使每个子类继承的父类属性无引用关系
            return function (father, son) {
                F.prototype = father.prototype; //私有函数取出父类的原型
                son.prototype = new F();
                son.prototype.superClass = father; //子类的超类指向父类，子类通过this.superClass调用Father
                son.prototype.constructor = son;
            }
        }())
        inherit(Father, Son)
        inherit(Son, Grandson)
        var father = new Father('fatherMan')
        var son = new Son('sonMan')
        var grandson = new Grandson('grandsonMan')
        console.log(son instanceof Father) //true
        console.log(grandson instanceof Son) //true
        console.log(grandson instanceof Father) //true
        console.log(father.sex) //fatherMan
        console.log(son.sex) //sonMan
        console.log(grandson.sex) //grandsonMan
        console.log(father.hobby) //fish
        console.log(son.hobby) //dog
        console.log(grandson.hobby) //cat
        father.getName() //father
        son.getName() //son
        grandson.getName() //grandson

JS从看懂到看开（前端面试题整合）

解释一下为何[ ] == ![ ] // ---> true

首先看一张图

尝试实现new

拓展typeof功能使其支持更多类型（array，object，null区分），并解释一下typeof null为何是object

typeof null为何是object

instanceof是什么？尝试实现一下

实现：

解释以下代码分别在控制台显示什么，并简单说明

写一个函数，计算字符串Unicode总长度（例如：abcd，打印4，qwerdf，打印6）

实现一下js中window自带的isNaN()函数

实现数组push()方法

实现数组乱序（提示：使用Array.sort）

以下代码在控制台显示什么？说明原因

打印结果是

解释以下代码打印为undefined的原因

使用JS原生实现function中的call，apply，bind函数

call:

对mvvm，mvp和mvc的理解

相同的地方

不同的地方

谈谈对前端页面渲染的理解（过程，原理，性能，重绘和回流）

页面渲染分为以下步骤

以下CSS属性可以生成新图层：

重绘（Repaint）和回流（Reflow）

所以以下几个动作可能会导致性能问题：

如何减少重绘和回流

谈谈对前端继承的理解

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JS从看懂到看开（前端面试题整合）

解释一下为何[ ] == ![ ] // ---> true

首先看一张图

尝试实现new

拓展typeof功能使其支持更多类型（array，object，null区分），并解释一下typeof null为何是object

typeof null为何是object

instanceof是什么？尝试实现一下

实现：

解释以下代码分别在控制台显示什么，并简单说明

写一个函数，计算字符串Unicode总长度（例如：abcd，打印4，qwerdf，打印6）

实现一下js中window自带的isNaN()函数

实现数组push()方法

实现数组乱序（提示：使用Array.sort）

以下代码在控制台显示什么？说明原因

打印结果是

解释以下代码打印为undefined的原因

使用JS原生实现function中的call，apply，bind函数

call:

对mvvm，mvp和mvc的理解

相同的地方

不同的地方

谈谈对前端页面渲染的理解（过程，原理，性能，重绘和回流）

页面渲染分为以下步骤

以下CSS属性可以生成新图层：

重绘（Repaint）和回流（Reflow）

所以以下几个动作可能会导致性能问题：

如何减少重绘和回流

谈谈对前端继承的理解

热门文章

最新文章

相关课程

相关电子书

相关实验场景