柒书
博客
工具
收藏
游戏
博客
工具
收藏
游戏

JS相关

1.数据类型

定义：JavaScript是一门有着动态类型的动态语言，也是一门弱类型语言。

原始类型：

  • null
  • undefined
  • string
  • number
  • boolean
  • symbol
  • bigint

Object类型（引用类型）：

  • Date
  • RegExp
  • Array
  • Function
  • Map、Set、WeakMap、WeakSet

原始类型和引用类型的地址存放在栈中，引用数据存放在堆中。

2.深拷贝

一般来说拷贝不涉及函数类型的拷贝

Object.prototype.clone = function () {
    const cloneObj = new this.constructor();
    const visited = new WeakMap();

    function deepClone(value) {
        if (value !== Object(value)) {
            return value;
        }
        if (visited.has(value)) {
            return visited.get(value);
        }
        let objClone;
        if (value instanceof Date) {
            objClone = new Date(value);
        } else if (value instanceof RegExp) {
            objClone = new RegExp(value);
        } else if (value === null) {
            return null;
        } else {
            objClone = Array.isArray(value) ? [] : {};
        }

        visited.set(value, objClone);

        for (let key in value) {
            if (value.hasOwnProperty(key)) {
                objClone[key] = deepClone(value[key]);
            }
        }

        return objClone;
    }

    // 使用 for...in 替代 for...of
    for (let key in this) {
        if (this.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(this[key]);
        }
    }

    return cloneObj;
}

3.原型链

定义：javascript使用对象实现继承。每个对象都有一个原型属性(__proto__)指向上一级的原型对象，直到原型是null的对象，这样的链路被称作原型链。

优点：子对象可以复用原型链上的属性和方法

例：

const a = { name: 12 }
const b = Object.create(a)
b.age = 26

// console.log(b)
{age: 26}   // b
// console.log(b.__proto__)
{name: 12}  // a
// console.log(a.__proto__)
{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …} // Object
// console.log(a.__proto__ === Object.prototype)
true
// console.log(a.__proto__.__proto__)
null
图1：示意图
图1：示意图

prototype是函数的原型对象

图2：示意图
图2：示意图

可以理解为，原型链上只有对象，函数和原型链的关系是它的prototype指向了一个原型对象，这个原型对象在原型链中

4.new运算符

在使用new运算符创建对象时，会发生以下步骤：

  1. 创建一个空的简单JavaScript对象{}。
  2. 给步骤1创建的对象添加__proto__属性并指向指向构造函数的prototype属性。
  3. 将步骤1创建的对象绑定为this的上下文。
  4. 如果构造函数返回非原始值，则该返回值成为整个new表达式的结果。否则，返回这个新创建的对象。

5.this关键字

定义：

  • this是一个动态绑定的关键字。
  • 它的值不是由函数定义时决定的，而是由函数调用时的上下文决定的。
  • 在不同的场景下，this的值会有所不同。
  1. 在全局上下文中、函数调用
  • 非严格模式：this指向globalThis
  • 严格模式：this指向undefined

  1. 方法调用：当函数作为对象的方法调用时this指向调用该方法的对象

  2. new运算符调用、构造函数调用：this指向新创建的对象

  3. 箭头函数：箭头函数没有this，它会捕获定义时所在上下文的this，不会被调用方式所改变

  4. 使用call、apply 和 bind

  • call和apply: call和apply直接调用函数，并指定this。
    区别在于参数传递方式：call 接受多个参数，apply 接受一个数组。
  • bind: bind返回一个新的函数，将this永久绑定到指定的对象。

6.DOM事件处理程序 在DOM事件处理程序中，this通常指向触发事件的元素。

  1. 类和实例方法 在类中，this指向类的实例。