你不可不知的JS面试题（第一期）

Jacquelyn38
• 阅读 1765

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');  
}

第四个例子：

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

如果你还不是不相信第四个例子的操作，那么我们实际操作一下。果不其然，还是返回true。你不可不知的JS面试题（第一期）我们先不着急，想它为什么会返回true。我们需要知道这两点。

四则运算转化：  

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


对比转化（==）：  

 - 布尔值、字符串转化为数字 ；  
 - 对象转化为字符串（绝大多数）；  
 - 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 红 黄 蓝

下一期更新 请关注 第二期

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路

你不可不知的JS面试题（第一期）

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

构造函数objectjs前端前端
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
4068
0
0
helloworld_34035044 helloworld_34035044
•
2年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
1110
0
0
Jacquelyn38 Jacquelyn38
•
3年前
你不可不知的JS面试题
1、JS中有哪些内置类型？7种。分别是boolean、number、string、object、undefined、null、symbol。2、NaN是独立的一种类型吗？不是。NaN是number类型。3、如何判断是哪个类型？Object.prototype.toString.call()，返回为\objectType\。现在我们来验证一下
1953
0
0
Easter79 Easter79
•
3年前
typeScript数据类型
//布尔类型letisDone:booleanfalse;//数字类型所有数字都是浮点数numberletdecLiteral:number6;lethexLiteral:number0xf00d;letbinaryLiteral:number0b101
812
0
0
待兔 待兔
•
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1042
0
0
Jacquelyn38 Jacquelyn38
•
3年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
2360
0
0
Stella981 Stella981
•
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
1796
0
0
Wesley13 Wesley13
•
3年前
35岁是技术人的天花板吗？
35岁是技术人的天花板吗？我非常不认同“35岁现象”，人类没有那么脆弱，人类的智力不会说是35岁之后就停止发展，更不是说35岁之后就没有机会了。马云35岁还在教书，任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢？所以35岁根本就不是一个问题，我今年已经37岁了，我发现我才刚刚找到自己的节奏，刚刚上路。
847
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1483
0
0
Python进阶者 Python进阶者
•
9个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
481
0
0
Jacquelyn38
Jacquelyn38
Lv1
细想出智慧，细嚼出滋味。
文章
83
粉丝
3
获赞
15
热门文章
Vue.js的图片加载性能优化你可以试试
React与Koa一起打造一个仿稀土掘金全栈个人博客（技术篇）
用了这 7 个 VS Code 插件，想写一辈子代码
Vue3.0系列——「vue3.0性能是如何变快的？」
nodeJS与MySQL实现分页数据以及倒序数据