【Step-By-Step】一周面试题 && 答案汇总 / 01

摘要：构造函数返回值是或，这种情况下指向的是返回的对象。并执行了构造函数中的方法如果函数没有返回其他对象，那么指向这个新对象，否则指向构造函数中返回的对象。对于文档来说应当是唯一的。的值意味着其不可能是基本数据类型。

不积跬步无以至千里。

Step-By-Step (点击进入项目) 是我于 2019-05-20 开始的一个项目，项目愿景：一步一个脚印，量变引起质变。

Step-By-Step 仅会在工作日发布面试题，主要考虑到部分小伙伴平时工作较为繁忙，或周末有出游计划。每个周末我会仔细阅读大家的答案，整理最一份较优答案出来，因本人水平有限，有误的地方，大家及时指正。参与答题的小伙伴，可以对比自己的回答。

答题不是目的，不希望大家仅仅是简单的搜索答案，复制粘贴到issue下。更多的是希望大家及时查漏补缺 / 巩固相关知识。

更多优质文章可戳: https://github.com/YvetteLau/...

如果用一句话说明 this 的指向，那么即是: 谁调用它，this 就指向谁。

但是仅通过这句话，我们很多时候并不能准确判断 this 的指向。因此我们需要借助一些规则去帮助自己：

this 的指向可以按照以下顺序判断:

浏览器环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象 window;

node 环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部），this 都是空对象 {};

如果是 new 绑定，并且构造函数中没有返回 function 或者是 object，那么 this 指向这个新对象。如下:

构造函数返回值不是 function 或 object。

function Super(age) {
    this.age = age;
}

let instance = new Super("26");
console.log(instance.age); //26

构造函数返回值是 function 或 object，这种情况下 this 指向的是返回的对象。

function Super(age) {
    this.age = age;
    let obj = {a: "2"};
    return obj;
}


let instance = new Super("hello");
console.log(instance.age); //undefined

你可以想知道为什么会这样？我们来看一下 new 的实现原理:

创建一个新对象。

这个新对象会被执行 [[原型]] 连接。

属性和方法被加入到 this 引用的对象中。并执行了构造函数中的方法.

如果函数没有返回其他对象，那么 this 指向这个新对象，否则 this 指向构造函数中返回的对象。

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    //排除 null 的情况
    if (res && typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
info.call(person);   //20
info.apply(person);  //20
info.bind(person)(); //20

这里同样需要注意一种特殊情况，如果 call,apply 或者 bind 传入的第一个参数值是 undefined 或者 null，严格模式下 this 的值为传入的值 null /undefined。非严格模式下，实际应用的默认绑定规则，this 指向全局对象(node环境为global，浏览器环境为window)

function info(){
    //node环境中:非严格模式 global，严格模式为null
    //浏览器环境中:非严格模式 window，严格模式为null
    console.log(this);
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
//严格模式抛出错误；
//非严格模式，node下输出undefined（因为全局的age不会挂在 global 上）
//非严格模式。浏览器环境下输出 28（因为全局的age会挂在 window 上）
info.call(null);

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
person.info(); //20;执行的是隐式绑定

非严格模式： node环境，执行全局对象 global，浏览器环境，执行全局对象 window。

严格模式：执行 undefined

function info(){
    console.log(this.age);
}
var age = 28;
//严格模式；抛错
//非严格模式，node下输出 undefined（因为全局的age不会挂在 global 上）
//非严格模式。浏览器环境下输出 28（因为全局的age不会挂在 window 上）
//严格模式抛出，因为 this 此时是 undefined
info(); 

箭头函数没有自己的this，继承外层上下文绑定的this。

let obj = {
    age: 20,
    info: function() {
        return () => {
            console.log(this.age); //this继承的是外层上下文绑定的this
        }
    }
}

let person = {age: 28};
let info = obj.info();
info(); //20

let info2 = obj.info.call(person);
info2(); //28

点击查看更多

Boolean

String

Number

Undefined

Null

Symbol(ES6新增)

ES10新增了一种基本数据类型：BigInt

复杂数据类型只有一种: Object

null 不是一个对象，尽管 typeof null 输出的是 object，这是一个历史遗留问题，JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，null 表示为全零，所以将它错误的判断为 object 。

内存的分配不同

基本数据类型存储在栈中。

复杂数据类型存储在堆中，栈中存储的变量，是指向堆中的引用地址。

访问机制不同

基本数据类型是按值访问

复杂数据类型按引用访问，JS不允许直接访问保存在堆内存中的对象，在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值。

复制变量时不同(a=b)

基本数据类型：a=b;是将b中保存的原始值的副本赋值给新变量a，a和b完全独立，互不影响

复杂数据类型：a=b;将b保存的对象内存的引用地址赋值给了新变量a;a和b指向了同一个堆内存地址，其中一个值发生了改变，另一个也会改变。

let b = {
    age: 10
}

let a = b;
a.age = 20;
console.log(a); //{ age: 20 }

参数传递的不同(实参/形参)

函数传参都是按值传递(栈中的存储的内容)：基本数据类型，拷贝的是值；复杂数据类型，拷贝的是引用地址

//基本数据类型
let b = 10

function change(info) {
    info=20;
}
//info=b;基本数据类型，拷贝的是值得副本，二者互不干扰
change(b);
console.log(b);//10

//复杂数据类型
let b = {
    age: 10
}

function change(info) {
    info.age = 20;
}
//info=b;根据第三条差异，可以看出，拷贝的是地址的引用，修改互相影响。
change(b);
console.log(b);//{ age: 20 }

点击查看更多

语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

代码结构清晰，易于阅读，利于开发和维护

方便其他设备解析（如屏幕阅读器）根据语义渲染网页。

有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

title：主要用于页面的头部的信息介绍

header：定义文档的页眉

nav：主要用于页面导航

main：规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

article：独立的自包含内容

h1~h6：定义标题

ul: 用来定义无序列表

ol: 用来定义有序列表

address：定义文档或文章的作者/拥有者的联系信息。

canvas：用于绘制图像

dialog：定义一个对话框、确认框或窗口

aside：定义其所处内容之外的内容。