你不可不知的JS面试题

Jacquelyn38 等级 1250 0 0

1、JS中有哪些内置类型?

7种。分别是boolean、number、string、object、undefined、null、symbol。

2、NaN是独立的一种类型吗?

不是。NaN是number类型。

3、如何判断是哪个类型?

Object.prototype.toString.call(),返回为[object Type]。

现在我们来验证一下。

Object.prototype.toString.call(NaN);
// "[object Number]"
Object.prototype.toString.call('1');
// "[object String]"
Object.prototype.toString.call([1,2]);
// "[object Array]"

为什么使用Object.prototype.toString.call(),而不用typeof。是因为它有一点具有局限性。比如当我们判断数组类型时,打印出的是object,而不是我们想要的Array。

typeof [1,2];
// "object"
typeof new Number(1);
// "object"

好,既然Object.prototype.toString.call()这么好用,我们不如封装一个方法。

function getType(v) {
  return Object.prototype.toString.call(v).match(/\[object (.+?)\]/)[1].toLowerCase();
}
getType(1);
// "number"

4、内置类型之间如何进行类型转换?

首先,我们先看几个例子。

第一个例子:

const a = 1;
const b = '1';
if(a==b){
  console.log('true') //true
}

第二个例子:

const x = 1+'1';
console.log(x); // 11
const y = 1*'1'; 
console.log(y); // 1

第三个例子:

`const array = [];``if (array) {` `console.log('true'); // 返回true``} else {` `console.log('false');``}`

第四个例子:

const array = [];
if (array) {
  console.log('true'); // 返回true
} else {
  console.log('false');
}

如果你还不是不相信第四个例子的操作,那么我们实际操作一下。果不其然,还是返回`true`。

你不可不知的JS面试题

我们先不着急,想它为什么会返回true。我们需要知道这两点。

四则运算转化:

  • 当遇到和字符串做 “加法” 时,会先将其转化为字符串,然后再进行字符串相加。
  • 当遇到“减法”、“乘法”、“除法”时,则会将其转化为数字,然后再进行运算。

对比转化(==):

  • 布尔值、字符串转化为数字 ;

  • 对象转化为字符串(绝大多数);

  • null、undefined、symbol、NaN;

我们先看下对比转化中的第三点。

  • null == undefined ,但是不等于其他。

你不可不知的JS面试题

你不可不知的JS面试题

  • symbol不等于其他。

你不可不知的JS面试题

  • NaN 不等于其他,关键是和自己都不相等。

你不可不知的JS面试题

好了,转为正题。第四个例子为什么会返回ture。因为[]先转化为字符串(对比转化中说过)。使用toString()方法转化,也就是'',然后''转化为数字0,最后false转化为0。0与0当然相等。

说了这么多,我们仔细来讲讲对象的数据类型转换。

对象的数据类型转换

  • valueOf

  • toString

  • Symbol.toPrimitive

我们先来个例子:

let obj = {
        valueOf(){
            return 1
        },
        toString(){
            return '字符'
        }
    };
    console.log(obj+1);

你是不是会觉得会是[object Object]1。告诉你,不是哦!而是2。因为valueOf、toString是对象内置的方法。这里我们只是自定义了一下。我们先来证明一下是不是真的是内置的方法。

你不可不知的JS面试题

valueOf方法是转换原始值,也就是自身。toString方法是转换为字符。

对了,为什么是2呢?这就是对象的数据转换的灵活性,它会根据自身环境的适应性。转换自身,这里我们使用obj+1,会优先使用数字相加。那么我们换成alert(obj)。

let obj = {
        valueOf(){
            return 1
        },
        toString(){
            return '字符'
        }
    };
    alert(obj); 

这里则会打印出字符。因为alert方法会优先使用字符类型。

最后,我们来讲下最后的一个属性Symbol.toPrimitive。

let obj = {
        valueOf(){
            return 1
        },
        toString(){
            return '字符'
        },
        [Symbol.toPrimitive](){
            return 10
        }
    }
    console.log(obj+1) // 11
    alert(obj); //10 

不论是相加操作,还是alert弹出。都是执行Symbol.toPrimitive。因为它的权重最高。

5、this是什么?

this指代表当前环境的上下文。

6、如何判断this的指向

  1. 默认情况(谁的方法就指向谁)

  2. 显示绑定

  3. 箭头函数

  4. 严格模式

第一种情况(谁的方法就指向谁)

1、

var a = 2;
    var obj = {
      a:1,
      getVal(){
          console.log(this.a); 
      }
    }
    obj.getVal(); //1

2、

class A {
       a(){
        console.log(this);
       }
   };
   const f = new A();
   f.a(); // A {}

3、

function fun() {
      console.log(this)
  };
  fun(); //window,这里相当于window.fun()。

第二种情况(显示绑定)

call、apply、bind方法都能显示改变this的指向。

var value = 3;
    var obj = {
        value: 1
    }
    function get() {
        console.log(this.value); 
    }
    get(); // 3
    get.call(obj); // 1
    get.apply(obj); // 1
    get.bind(obj)(); // 1

第三种情况(箭头函数)

箭头函数的this与function中的this指向不同,它指向其外部的上下文。

var value = 3;
    var obj = {
        value: 1,
        get: ()=> {
            console.log(this.value);
        }
    }
    obj.get(); // 3

第四种情况 (严格模式

严格模式下,方法直接被调用的时候,方法内部的`this`不会指向`window`。

'use strict'
function fun() {
    console.log(this)
}
fun(); //undefined

7、什么是prototype?

prototype就是原型对象,它是函数所独有的,它包含了一个函数(类)所有的实例共享的属性和方法。

function A() {};
A.prototype.get=()=>{
    console.log('我是get方法');
}
var a1 = new A();
a1.get(); // 我是get方法
var a2= new A();
a2.get(); // 我是get方法

a1和a2都是A的实例,所以他们都有A的原型对象上的get方法属性。

8、将方法设置在prototype上和设置在构造函数的this上有什么区别?

function A() {};
    A.prototype.get = () => {
        console.log('我是A');
    }


 function B() {
        this.get = () => {
            console.log('我是B');
        }
    };
  • 绑定在`prototype`上的方法只会在内存中存储一份,每个实例都会根据原型链找到构造函数上的这个方法,然后调用。

  • 绑定在构造函数`this`上的方法会在每次实例化的时候都在内存中创建一次,也是`new`几次,就会创建几次。

9、什么是__proto__?

  • __proto__是浏览器内部的属性,并非js标准属性。(一般我们不会直接操作它)

  • 每个对象都有__proto__,且指向构造函数的prototype。(非常重要,但是null和undefined没有__proto__)

第二点注意,下面两个例子都返回true。

function F() {};
 const f = new F();
 f.__proto__ === F.prototype?console.log('true'):console.log('false'); //true
const n = new Number(1);
n.__proto__ === Number.prototype?console.log('true'):console.log('false'); // true

10、对象的原型链组成?

原型链:

你不可不知的JS面试题

function A() {};
   const a = new A();
   a.__proto__===A.prototype?console.log('true'):console.log('false');//true
   console.log(A.prototype); // {constructor:f}
   A.prototype.get=()=>{
       console.log('这是get')
   }
   console.log(A.prototype); // {get:f,constructor:f} //打印出为一个对象
   // 以下两行代码为举例
   const obj = new Object({get:()=>{},constructor:()=>{}})
   console.log(obj);

   A.prototype.__proto__===Object.prototype?console.log('true'):console.log('false');//true

11、构造函数的原型链?

众所周知,构造函数也是对象。我们知道创建构造函数有两种方法。

1、

function A() {};
   console.log(A); //ƒ A() {}

2、

const B = new Function();
  console.log(B); //ƒ anonymous() {}

所以说,我们看下A.__proto===Function.prototype是否成立。

function A() {};
   A.__proto__===Function.prototype?console.log('true'):console.log('false');//true

同理,构造函数的原型链:

你不可不知的JS面试题

验证一下,

Function.prototype.__proto__===Object.prototype?console.log('true'):console.log('false');//true

那么,我们又有另一个疑问?Function.__proto__指向谁呢?

Function.__proto__===Function.prototype?console.log('true'):console.log('false');//true

Function.prototype比较特殊,它是浏览器自身创建出来的内置对象。同样,Object.prototype也是浏览器引擎创建出来的内置对象,它们都指向null。

你不可不知的JS面试题

你不可不知的JS面试题

12、prototype上的constructor是什么?

每一个函数的原型对象上的constructor都指向函数本身,目前它并没有什么作用,或许可以当作instanceof来使用(当然constructor的指向也是可以被改变的,不过真的没啥用)

function A() {};
 A.prototype.constructor===A?console.log('true'):console.log('false');//true
function A() {};
const a = new A();
console.log(a instanceof A) // true

13、call、apply、bind的作用是什么?

它们都是为了改变方法内部this的指向。

14、call、apply怎么区别?

  • call和apply第一个参数均为this的指向。

  • call的其余参数就是一个普通的参数列表。

  • apply除了第一个参数外,只接受一个数组类型的参数。

call的用法:

const obj = {name:'maomin'};
    function get(age,sex) {
        console.log(`
        我的名字:${this.name}
        我的年龄:${age}
        我的性别:${sex}
        `)
    }
    get.call(obj,18,'男');
    //我的名字:maomin
    //我的年龄:18
    //我的性别:男

apply的用法:

const obj = {name:'maomin'};
    function get(age,sex) {
        console.log(`
        我的名字:${this.name}
        我的年龄:${age}
        我的性别:${sex}
        `)
    }
    get.apply(obj,[18,'男']);
    //我的名字:maomin
    //我的年龄:18
    //我的性别:男

15、bind与call和apply的不同?

  • 第一个参数为this的指向,其余参数是一个普通的参数列表。(这一点跟call很像)

  • 返回的是一个函数,需要再调用一下。(bind可以实现柯里化)

1、

function get(x,y,z) {
        console.log(x,y,z)
    }
    console.log(get.bind(null,'红','黄','蓝'))
    // ƒ (x,y,z) {
    // console.log(x,y,z)
    // }
    get.bind(null,'红','黄','蓝')(); // 红 黄 蓝

2、

function get(x,y,z) {
        console.log(this.name,x,y,z)
    }
    get.bind({name:'maomin'},'红','黄','蓝')(); // maomin 红 黄 蓝

柯里化:

function get(x,y,z) {
        console.log(this.name,x,y,z)
    }
   get.bind({name:'maomin'}).bind(null,'红').bind(null,'黄').bind(null,'蓝')(); // maomin 红 黄 蓝

你不可不知的JS面试题)谢谢浏览,下期再见你不可不知的JS面试题

你不可不知的JS面试题下一期更新: 继承

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/UEFpWSAqR2pqQDB9tMJciA,如有侵权,请联系删除。

收藏
评论区

相关推荐

😎手撕吊打面试官系列面试题
js基础 1. 用js打印一个乘法表 这一题面试官考察的是你关于js的打印相关基础api的熟悉程度,以及基本的数学常识,送分题 console.log( 111 212 224 313 326 339 414 428 4312 4416 515 5210 5315 5420 5525
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型 在JS中变量类型由所引用的值决定 var web "helloWorld"; console.log(typeof web); //string web 99; console.log(typeof web); //number web {}; console.log(typeof web); //object 变量提升
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
你不可不知的JS面试题(第一期)
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为[object Type]。现在我们来验证一下。Objec
你不可不知的JS面试题
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为\[object Type\]。 现在我们来验证一下
javascript实践教程-05-数据类型
本节目标1. 掌握js中7种数据类型。2. 掌握5种基本数据类型number、string、boolean、null、undefined的声明。3. 掌握js中数组的声明和数组相关的方法。4. 掌握js中对象的声明和属性、方法的使用。 内容摘要本篇介绍了js中的7种数据类型,其中5种基本数据类型:number、string、boolean、null、unde
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS调试技术
这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没
1、webpack入门例子。
在下面的例子中,简单使用webpack打包一个js。并且把这个js引用的其他js、json数据一起打包进去。 官网:[http://webpack.github.io/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwebpack.github.io%2F) 英文文档:  [http
JS(react)里面Json、String、Map、Object之间的转换
import React, {Component} from 'react' class JsonUtils extends React.Component { /** *字符串转json * */ static stringToJson(data){ return
JS中 typeof,instanceof类型检测方式
在js中的类型检测目前我所知道的是三种方式,分别有它们的应用场景: 1、typeof:主要用于检测基本类型. typeof undefined;//=> undefined typeof 'a';//=> string typeof 1;//=> number typeof true;//=> boolean ty
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
JavaScript基础
**_1,js组成_** ------------ ###         核心:ECMAScript标准                   此标准指定了js的基础语法,数据类型,关键字,操作符,对象; ###         DOM:文档对象模型标准(Document object Model)                   是js针对xm