js深入浅出

太过爱你忘了你带给我的痛 2021-09-03 04:30 370阅读 0赞

# js深入浅出： #

提示：js深入浅出

# 数据类型 #

1.  数据类型：基本类型（null，undefined，boolean，number，string，symbol）和对象（Object）-- Function、Array、Date…
2.  对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。

let a = {  name: 'EE' }
    let b = a
    b.name = 'FF'
    console.log(a.name) // FF
    a.age = 18
    console.log(b) // {name: "FF", age: 18}
    console.log(a) // {name: "FF", age: 18}

1.  巧用+、-规则转换类型。如果想把num转换为数字，num-0；如果想把num转换为字符串，num+“”

"37" - 7 // 30
        "37" + 7 // 377

1.  a == b

"1.23" == 1.23 // 类型不同，尝试类型转换和比较
    	1 == true  
    	0 == false
    	null == undefined
    	new String('hi') == 'hi' // object == number | strubg 尝试对象转为基本类型 
    	new Object() == new Object() 
    	[1,2] == [1,2]

1.  a === b 类型不同直接返回 false
2.  类型检测 typeof

*  typeof 适合基本类型及 funciton 检测，遇到 null 失效
    
    1.  typeof 1 // number
    2.  typeof ‘1’ // ‘string’
    3.  typeof (undefined) // undefined
    4.  typeof b // b 没有声明，但是还会显示 undefined
    5.  typeof true // boolean
    6.  typeof NaN // number
 *  typeof 对于对象，除了函数都会显示 object
    
    1.  typeof \[\] // ‘object’
    2.  typeof \{\} // ‘object’
    3.  typeof console.log // ‘function’
 *  对于 null 来说，虽然它是基本类型，但是会显示 object
    
    1.  typeof null // object
 *  \[\[class\]\] 通过\{\}.toString拿到，适合内置对象和基元类型，遇到 null 和 undefined 失效
 *  instanceof 适合自定义对象，也可以用来检测原生对象，在不同 iframe 和 window 间检测时失效。

1.  Object.prototype.toString

*  如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)。这样我们就可以获得类似 \[object Type\] 的字符串。

let a
    // 我们也可以这样判断 undefined
    a === undefined
    // 但是 undefined 不是保留字，能够在低版本浏览器被赋值
    let undefined = 1
    // 这样判断就会出错
    // 所以可以用下面的方式来判断，并且代码量更少
    // 因为 void 后面随便跟上一个组成表达式
    // 返回就是 undefined
    a === void 0

1.  转Boolean  
    在条件判断时，除了 undefined， null， false， NaN， ‘’， 0， -0，其他所有值都转为 true，包括所有对象。
2.  instanceof  
    instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。  
    我们也可以试着实现一下 instanceof

function instanceof(left, right) { 
        // 获得类型的原型
        let prototype = right.prototype
        // 获得对象的原型
        left = left.__proto__
        // 判断对象的类型是否等于类型的原型
        while (true) { 
        	if (left === null)
        		return false
        	if (prototype === left)
        		return true
        	left = left.__proto__
        }
    }

我们也可以试着实现一下 instanceof

# 作用域 #

1.  没有块级作用域![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGFvMzU3OTE_size_16_color_FFFFFF_t_70]
2.  有函数级作用域

function foo() { 
    	var a = 1
    	console.log(a) // 1
    }
    foo()
    console.log(typeof a) // undefined

1.  函数声明和函数表达式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGFvMzU3OTE_size_16_color_FFFFFF_t_70_pic_center]

# 对象 todo1 #

# 原型 todo2 #

# new #

1.  新生成了一个对象
2.  链接到原型
3.  绑定 this
4.  返回新对象  
    在调用 new 的过程中会发生以上四件事情，我们也可以试着来自己实现一个 new

function create() { 
        // 创建一个空的对象
        let obj = new Object()
        // 获得构造函数
        let Con = [].shift.call(arguments)
        // 链接到原型
        obj.__proto__ = Con.prototype
        // 绑定 this，执行构造函数
        let result = Con.apply(obj, arguments)
        // 确保 new 出来的是个对象
        return typeof result === 'object' ? result : obj
    }

对于实例对象来说，都是通过 new 产生的，无论是 function Foo() 还是 let a = \{ b : 1 \} 。

对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object，但是你使用字面量的方式就没这个问题。

function Foo() { }
    // function 就是个语法糖
    // 内部等同于 new Function()
    let a = {  b: 1 }
    // 这个字面量内部也是使用了 new Object()

# this #

this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。

function foo() { 
    	console.log(this.a)
    }
    var a = 1
    foo()
    
    var obj = { 
    	a: 2,
    	foo: foo
    }
    obj.foo()
    
    // 以上两者情况 `this` 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况
    
    // 以下情况是优先级最高的，`this` 只会绑定在 `c` 上，不会被任何方式修改 `this` 指向
    var c = new foo()
    c.a = 3
    console.log(c.a)
    
    // 还有种就是利用 call，apply，bind 改变 this，这个优先级仅次于 new

以上几种情况明白了，很多代码中的 this 应该就没什么问题了，下面让我们看看箭头函数中的 this

function a() { 
        return () => { 
            return () => { 
            	console.log(this)
            }
        }
    }
    console.log(a()()())

箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window。并且 this 一旦绑定了上下文，就不会被任何代码改变。

# 执行上下文 todo 3 需要优化 #

当执行 JS 代码时，会产生三种执行上下文

*  全局执行上下文
 *  函数执行上下文
 *  eval 执行上下文

每个执行上下文中都有三个重要的属性

*  变量对象（VO），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问
 *  作用域链（JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了）
 *  this

var a = 10
    function foo(i) { 
      var b = 20
    }
    foo()

对于上述代码，执行栈中有两个上下文：全局上下文和函数 foo 上下文。

stack = [
        globalContext,
        fooContext
    ]

对于全局上下文来说，VO 大概是这样的

globalContext.VO === globe
    globalContext.VO = { 
        a: undefined,
    	foo: <Function>,
    }

对于函数 foo 来说，VO 不能访问，只能访问到活动对象（AO）

fooContext.VO === foo.AO
    fooContext.AO { 
        i: undefined,
    	b: undefined,
        arguments: <>
    }
    // arguments 是函数独有的对象(箭头函数没有)
    // 该对象是一个伪数组，有 `length` 属性且可以通过下标访问元素
    // 该对象中的 `callee` 属性代表函数本身
    // `caller` 属性代表函数的调用者

对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 \[\[Scope\]\] 属性查找上级变量

fooContext.[[Scope]] = [
        globalContext.VO
    ]
    fooContext.Scope = fooContext.[[Scope]] + fooContext.VO
    fooContext.Scope = [
        fooContext.VO,
        globalContext.VO
    ]

接下来让我们看一个老生常谈的例子，var

b() // call b
    console.log(a) // undefined
    
    var a = 'Hello world'
    
    function b() { 
    	console.log('call b')
    }

想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 VO），JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。

在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

b() // call b second
    
    function b() { 
    	console.log('call b fist')
    }
    function b() { 
    	console.log('call b second')
    }
    var b = 'Hello world'

var 会产生很多错误，所以在 ES6中引入了 let。let 不能在声明前使用，但是这并不是常说的 let 不会提升，let 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。

对于非匿名的立即执行函数需要注意以下一点

var foo = 1
    (function foo() { 
        foo = 10
        console.log(foo)
    }()) // -> ƒ foo() { foo = 10 ; console.log(foo) }

因为当 JS 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 foo，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。

specialObject = { };
    
    Scope = specialObject + Scope;
    
    foo = new FunctionExpression;
    foo.[[Scope]] = Scope;
    specialObject.foo = foo; // {DontDelete}, {ReadOnly}
    
    delete Scope[0]; // remove specialObject from the front of scope chain

# 深浅拷贝 #

let a = { 
        age: 1
    }
    let b = a
    a.age = 2
    console.log(b.age) // 2

从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。

通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。

## 浅拷贝 ##

首先可以通过 Object.assign 来解决这个问题。

let a = { 
        age: 1
    }
    let b = Object.assign({ }, a)
    a.age = 2
    console.log(b.age) // 1

当然我们也可以通过展开运算符（…）来解决

let a = { 
        age: 1
    }
    let b = { ...a}
    a.age = 2
    console.log(b.age) // 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就需要使用到深拷贝了

let a = { 
        age: 1,
        jobs: { 
            first: 'FE'
        }
    }
    let b = { ...a}
    a.jobs.first = 'native'
    console.log(b.jobs.first) // native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到刚开始的话题了，两者享有相同的引用。要解决这个问题，我们需要引入深拷贝。

## 深拷贝 ##

这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

let a = { 
        age: 1,
        jobs: { 
            first: 'FE'
        }
    }
    let b = JSON.parse(JSON.stringify(a))
    a.jobs.first = 'native'
    console.log(b.jobs.first) // FE

但是该方法也是有局限性的：

*  会忽略 undefined
 *  会忽略 symbol
 *  不能序列化函数
 *  不能解决循环引用的对象

当然如果你的数据中含有以上三种情况下，可以使用 lodash 的深拷贝函数

# 模块化 #

// file a.js
    export function a() { }
    export function b() { }
    // file b.js
    export default function() { }
    
    import { a, b} from './a.js'
    import XXX from './b.js'

# 闭包 #

闭包的定义很简单：函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。

function A() { 
      let a = 1
      function B() { 
          console.log(a)
      }
      return B
    }

你是否会疑惑，为什么函数 A 已经弹出调用栈了，为什么函数 B 还能引用到函数 A 中的变量。因为函数 A 中的变量这时候是存储在堆上的。现在的 JS 引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。

经典面试题，循环中使用闭包解决 var 定义函数的问题

for ( var i=1; i<=5; i++) { 
    	setTimeout( function timer() { 
    		console.log( i );
    	}, i*1000 );
    }

首先因为 setTimeout 是个异步函数，所有会先把循环全部执行完毕，这时候 i 就是 6 了，所以会输出一堆 6。

解决办法两种，第一种使用闭包

for (var i = 1; i <= 5; i++) { 
      (function(j) { 
        setTimeout(function timer() { 
          console.log(j);
        }, j * 1000);
      })(i);
    }

第二种就是使用 setTimeout 的第三个参数

for ( var i=1; i<=5; i++) { 
    	setTimeout( function timer(j) { 
    		console.log( j );
    	}, i*1000, i);
    }

第三种就是使用 let 定义 i 了

for ( let i=1; i<=5; i++) { 
    	setTimeout( function timer() { 
    		console.log( i );
    	}, i*1000 );
    }

因为对于 let 来说，他会创建一个块级作用域，相当于

{  // 形成块级作用域
      let i = 0
      { 
        let ii = i
        setTimeout( function timer() { 
            console.log( ii );
        }, i*1000 );
      }
      i++
      { 
        let ii = i
      }
      i++
      { 
        let ii = i
      }
      ...
    }

# 防抖 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGFvMzU3OTE_size_16_color_FFFFFF_t_70]: /images/20210813/d3098c453abe445d978118027a76f2a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5naGFvMzU3OTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/37ed51f5550441c085c2cf95343a2bbb.png