JavaScript核心概念与实践技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51400347/article/details/117104575

1. this关键字的指向

在全局作用域中的函数中this指向全局对象 window

var x = 1; // var声明的变量会与 window 相映射，相当于 window.x === 1
function test(){
    console.log(this.x);
}

test(); // 1

多数情况下，this 指向调用它所在方法的那个对象（this 的指向是在调用时决定的，而不是在书写时决定的。这点和闭包恰恰相反）

// 声明位置
var me = {
  name: 'xiuyan',
  hello: function() {
    console.log(`你好，我是${this.name}`)
  }
}

var you = {
  name: 'xiaoming',
  hello: me.hello
}

// 调用位置
me.hello() // xiuyan
you.hello() // xiaoming

在一个构造函数中，this 指向构造函数 new 出的实例对象

function Test(){
    this.x = 1;
}

var obj = new Test();
console.log(obj.x); // 1

在箭头函数中，this指向父级上下文

var name = 'BigBear'
var me = {
  name: 'xiuyan',
  // 声明位置
  hello: () => {
      console.log(this.name)
  }
}

// 调用位置
me.hello() // BigBear

通过 call，apply，bind 改变 this 指向

var x = 0;
function test(){
    console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply();    // 0   this指的是全局对象
obj.m.apply(obj);   // 1    this指的是obj

2. 对象与面向对象

对象

属性和方法的集合叫做对象（万物皆对象）

面向对象

面向对象（Object Oriented Programming）是把事务分解成为一个个对象，然后由对象之间分工与合作。

面向对象是以对象功能来划分问题，而不是步骤

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目

面向对象的特性：

封装性
继承性
多态性

3. 事件模型：事件委托、代理？如何让事件先冒泡后捕获？

事件委托

又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

先冒泡后捕获

根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

4. window的onload事件和DOMContentLoaded

onload

等页面的内容全部加载完毕，包含页面的 DOM 元素、图片、css 等

DOMContentLoaded

等页面的DOM内容加载完毕，不包含 DOM 元素、图片、css 等

区别

onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。

5. for···in和for···of的区别

for…in

从遍历数组角度来说，for···in遍历出来的是key（即索引）
从遍历字符串的角度来说，同数组一样
从遍历对象的角度来说，for···in会遍历出来的为对象的key（即键名）

for…of

从遍历数组角度来说，for···in遍历出来的是value（即数组索引对应的值）
for…of 遍历对象会直接报错，可以用 obj.keys() 遍历对象的键名

6. 函数柯里化（卡瑞化、加里化）？

柯里化是把接受 n 个参数的 1 个函数改造为只接受 1个参数的 n 个互相嵌套的函数的过程。

也就是 fn (a, b, c)会变成 fn (a)(b)©。

7. iframe的优缺点有哪些？

优点

iframe能够原封不动的把嵌入的网页展现出来；
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点

会产生很多页面不易管理；
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

8. 查找数组重复项

首位索引法

var findRepect = function (arr = []) {
    var result = [];
    // 遍历数组
    arr.forEach(item => {
        // 如果 item 首次出现的位置和最后出现的位置的下标不同，则说明该 item 至少重复出现1次
        if (arr.indexOf(item) !== arr.lastIndexOf(item) && !result.includes(item)) {
            result.push(item)
        }
    })
    return result
}
var arr = [1, 2, 45, 44, 45, 2, 89, 1, 1, 2, 1, 2, 44];
console.log(findRepect(arr)); // [1, 2, 45, 44]

该方法主要是利用了数组的两个方法 indexOf 和 lastIndexOf，indexOf 可以返回元素在数组中首次出现的位置对应的索引，lastIndexOf 可以返回元素在数组中最后出现的位置对应的索引，如果 item 首次出现的位置和最后出现的位置的下标不同，则说明该 item 至少重复出现1次。

9. 数组扁平化

递归法

var flatten_1 = function (arr = []) {
    let result = []
    // 遍历数组
    arr.forEach(item => {
        // 如果 item 是一个数组，则需要再次调用函数，执行递归
        if (Array.isArray(item)) {
            // 讲递归出来的结果与 result 相拼接
            result = result.concat(flatten_1(item))
        } else {
            // 如果不是，之间 push 到 result 中
            result.push(item)
        }
    })
    // 返回结果
    return result
}
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(flatten_1(arr)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

该方法主要利用了递归的思想，通过遍历数组，然后利用 Array.isArray() 来判断 item 是否是一个数组，不是数组 push 到 result，是数组进行递归，将递归出来的结果与 result 拼接，最后的出结果

join & split

var flatten_2 = function (arr = []) {
    let result = []
    // 用 join 将数组分割成字符串，再用 split 将字符串拼接成数组
    result = arr.join(",").split(',').map(item => {
        // 将 item 转换为数字类型
        return Number(item)
    })
    // 返回结果
    return result
}
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(flatten_1(arr)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]