专栏首页前端自习课【面试宝典】298- 每天5道题,温故而知新

【面试宝典】298- 每天5道题,温故而知新

本系列文章针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。

思考

这是今天的题目,你可以先思考一下,然后重点关注不熟悉的~

  • JS中基本数据类型有哪几种?基本数据和复杂数据类型有什么区别?
  • JavaScript中什么是闭包?写出一个例子
  • 如何正确判断this的指向?(注意区分严格模式和非严格模式)?
  • 说一下对call、apply、bind三个函数的认识?自己实现一下bind方法
  • JavaScript实现一个继承方法

逐个击破

1.JS中数据类型有哪几种?有什么区别?

最新的 ECMAScript 标准定义了 7 种数据类型:

简单(基本)数据类型 Undefined、Null、Boolean、Number、String、 Symbol类型(ES6新增)

复杂数据类型:Object

注意一下两种特殊类型:

  • Unndefined类型:该类型只有一个值,即特殊的undefined。在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined。无论在什么情况下都没有必要把一个变量的值显式地设置为undefined
  • Null类型:该类型同样只有一个值,即null。从逻辑角度来看,null表示一个空指针对象,而这也正式使用typeof操作符检测null值时会返回object的原因。事实上,undefined值是派生自null值的。
基本数据和复杂数据类型的区别
  • 基本类型值:指的是保存在内存中的简单数据段;
  • 引用类型值(复杂数据):指的是那些保存在内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针指向内存堆中实际的值;
两种访问方式的区别
  • 基本类型值:按值访问,操作的是他们实际保存的值;
  • 引用类型值:按引用访问,当查询时,我们需要先从栈中读取内存地址,然后再顺藤摸瓜地找到保存在堆内存中的值;

两种类型复制的区别

基本类型变量的复制:

从一个变量向一个变量复制时,会在栈中创建一个新值,然后把值复制到为新变量分配的位置上,改变源数据不会影响到新的变量(互不干涉);

引用类型变量的复制:

复制的是存储在栈中的指针,将指针复制到栈中为新变量分配的空间中,而这个指针副本和原指针执行存储在堆中的同一个对象,复制操作结束后,两个变量实际上将引用同一个对象;因此改变其中的一个,将影响另一个;

2.JavaScript中什么是闭包?写出一个例子?

闭包就是定义在函数内部,能够读取其他函数内部变量的函数。

举例:用闭包实现一个计数器

function createCounter() {
        let counter = 0;
        return function () {
            counter = counter + 1;
            return counter
        };
    }
    const increment = createCounter();
    const c1 = increment();
    const c2 = increment();
    const c3 = increment();
    console.log('example increment', c1, c2, c3);//1,2,3

闭包的用途:

  • 可以读取函数内部的变量,
  • 让这些变量的值始终保持在内存中。

使用闭包注意点

  1. 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大
  2. 闭包会在父函数外部,注意不能随便改变父函数内部变量的值

还有疑问的话可以查看我这篇文章【JS基础系列】带你深入理解闭包

3.如何正确判断this的指向(注意区分严格模式和非严格模式)?

this的指向总共可以分为五种:

  • 默认绑定(非严格模式-window,严格模式-undefined)
  • 隐式绑定(一般是上下文,特殊情况指向window或者undefined)
  • 显式绑定(指向绑定的对象,特殊情况指向window或者undefined)
  • new绑定(一般指向新对象,但是返回function或object时,指向返回的对象)
  • 箭头函数绑定(指向上下文中的this)

还有疑问的话可以查看我这篇文章【JS基础系列】如何正确判断this的指向?

4.说一下对call、apply、bind三个区别?自己实现一下bind方法

在JS中,call、apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。

call、apply、bind方法的共同点和区别:

  • 三者都是用来改变函数的this对象的指向的;
  • 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。);
  • 三者都可以利用后续参数传参;
  • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。

var func = function(arg1, arg2) {};
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])
func.bind(this, arg1, arg2)()

其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

下面自己实现一个bind方法:

Function.prototype.bind2 = function (context) {
    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

还有疑问的话可以查看我这篇文章【JS基础系列】bind方法的模拟实现

5.js实现一个继承方法

// 借用构造函数继承实例属性
function Child () {
  Parent.call(this)
}
// 寄生继承原型属性
(function () {
  let Super = function () {}
  Super.prototype = Parent.prototype
  Child.prototype = new Super()
})()

恭喜你,又掌握了一个新技能~

本文分享自微信公众号 - 前端自习课(FE-study),作者:前端FE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JS】635- 十个超级实用的 JS 特性

    翻译内容转载自 New Frontend:https://nextfe.com/morden-js/

    pingan8787
  • 【算法】213-每周一练 之 数据结构与算法(LinkedList)

    这些都是数据结构与算法,一部分方法是团队其他成员实现的,一部分我自己做的,有什么其他实现方法或错误,欢迎各位大佬指点,感谢。

    pingan8787
  • 【JS】332- 为什么我更喜欢对象而不是 switch 语句

    最近(或者不是最近,这完全取决于您什么时候阅读这边文章),我正在跟我的团队伙伴讨论如何去处理这种需要根据不同的值去处理不同的情况的方法,通常对于这种情况下,人们...

    pingan8787
  • 干货丨从TensorFlow到PyTorch:九大深度学习框架哪款最适合你?

    现在的许多机器学习框架都可以在图像识别、手写识别、视频识别、语音识别、目标识别和自然语言处理等许多领域大展身手,但却并没有一个完美的深度神经网络能解决你的所有业...

    IT派
  • 运维安全第2节—暴力破解之基于表单的暴力破解实验

    如果一个网站没有对登陆接口实施防暴力破解的措施,或者实施了不合理的措施,则称该网站存在暴力破解漏洞。常见类型:

    阿dai学长
  • Leetcode 105 Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Not...

    triplebee
  • VUE-Vuetify框架

    Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:

    cwl_java
  • 如何消除双休日影响来计算销售额?

    我们需要求出当月每星期的平均销售额,然后再根据当日的销售额去对比看下完成比例情况。

    逍遥之
  • MLK | 特征工程系统化干货笔记+代码了解一下(中)

    如果我们对变量进行处理之后,效果仍不是非常理想,就需要进行特征构建了,也就是衍生新变量。

    Sam Gor
  • python读文件

    #some words Sometimes in life, You find a special friend; Someone who changes...

    py3study

扫码关注云+社区

领取腾讯云代金券