JS高频八股

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

const test = new Test();

console.log(test.__proto__ === Test.prototype) //true

console.log(test.__proto__) //与Test.prototype相同

console.log(Test.prototype.__proto__) //与Object.prototype相同

console.log(Object.prototype.__proto__) //null

//复用上面的
console.log(test.a); //1

console.log(test.b) //找不到

//如果我在Test.prototype上增加一个属性
Test.prototype.b = 2;

//再执行
console.log(test.b) //先找test里有没有，没有，那就往它的上一层原型链找，ok，找到，打印2

//同理的
Object.prototype.c = 3;

console.log(test.c) // //先找test里有没有，没有，那就往它的上一层原型链找，还没有，再往上一层找，找到，打印3

//如果都没有，那就返回undefined;

consoloe.log(Test.__proto__) //ƒ () { [native code] }

//测试一下
console.log(Test.__proto__ === Function.prototype) //true

console.log(Function.__proto__); //ƒ () { [native code] }

console.log(Function.__proto__ === Function.prototype); //true

console.log(typeof Object); //function

console.log(Object.__proto__ === Function.prototype); //true

console.log(Function.__proto__ === Function.prototype); //true

test.hasOwnProperty('a');//true
test.hasOwnProperty('b');//false 因为这个属性它本身没有

Test.prototype.b = 1;
'b' in test ; //true 因为原型链上找的到

console.log(test.constructor);//ƒ Test() {this.a = 1}

console.log(test.constructor === Test); //true

function Test1() {
	this.a = 123;
}

Test.prototype.constructor = Test1;

console.log(test.constructor === Test1) //true

const clone = structuredClone(obj);

/**
 * 深拷贝函数，支持对象、数组、Date、RegExp，并能处理循环引用
 * @param {any} target - 需要深拷贝的目标对象
 * @param {WeakMap} map - 记录已经拷贝过的对象，防止循环引用导致死循环
 * @returns {any} - 返回深拷贝过的新对象
 */
function deepClone(target, map = new WeakMap()) {
    //如果target不是对象或者null，直接返回（即基本类型直接返回）
    if (typeof target !== 'object' || target === null) {
        return target;
    }
    //处理循环引用
    if (map.has(target)) {
        return map.get(target);
    }
    //创建新对象进行存储
    let clone;
    //针对不同类型进行判断
    if (target instanceof Array) {
        //数组
        clone = [];
    } else if (target instanceof Date) {
        //Date类型
        clone = new Date(target.getTime());
    } else if (target instanceof RegExp) {
        //正则表达式类型
        clone = new RegExp(target);
    } else {
        //对象
        clone = {};
    }
    //记录当前的对象，防止循环引用
    map.set(target, clone);
    //遍历target，递归拷贝
    for (let key in target) {
        //判断是否为自身属性，排除原型链属性
        if (target.hasOwnProperty(key)) {
            //递归调用
            clone[key] = deepClone(target[key], map);
        }
    }
    //返回克隆完的对象
    return clone;
}

const original = {
    a: 1,
    b: [2, 3],
    c: { d: 4 }    
};

const cloned = deepClone(original);

/**
 * 防抖函数：返回一个新的函数，只有在指定延迟的时间内没有再次调用，才会执行原函数
 * 
 * @param {Function} func - 需要防抖处理的原函数
 * @param {number} delay - 延迟时间(ms)，规定了在最后一次调用后过多长时间后执行func
 * @returns {Function} - 返回处理过的原函数
 */
export function debounce(func, delay) {
    //保存一个计时器的引用，利用闭包来实现未来不同作用域的调用
    let timer = null;
    //返回一个新函数代替原函数
    return function () {
        //保存当前函数的this上下文
        const context = this;
        //保存当前函数的参数
        const args = arguments;
        //如果timer已经存在，则说明在延迟时间内又重复调用了，所以要清除之前的timer，然后重新设置一个timer
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            //使用apply保证func内部的this和参数不变
            func.apply(context, args);
        }, delay)
    }
}

/**
 * 节流函数：限制func在delay(ms)内只能执行一次
 * @param {Function} func - 需要被节流的原函数
 * @param {number} delay - 节流的时间间隔(ms)
 * @returns {Function} - 返回一个新的节流函数
 */
export function throttle(func, delay) {
    //保存一个标志变量，控制func是否能够执行，初始值为true，利用闭包来实现未来不同作用的调用
    let canRun = true;
    //返回新的节流函数
    return function () {
        //保存当前的this上下文
        const context = this;
        //保存传入的参数
        const args = arguments;
        //判断是否能执行
        if (canRun) {
            //执行原函数，并绑定上下文和参数
            func.apply(context, args);
            //设置canRun为false防止在delay(ms)内重复调用
            canRun = false;
            //设置定时器，delay(ms)后重置canRun为true
            setTimeout(() => {
                canRun = true;
            }, delay)
        }
    }
}

//可靠识别
console.log(typeof 'hello'); // "string"
console.log(typeof 123); // "number"
console.log(typeof BigInt(10)); // "bigint"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof function() {}); // "function"
console.log(typeof Symbol()); // "symbol"
//不可靠识别
console.log(typeof null); // "object"（这是 JavaScript 语言的一个历史遗留问题）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof new Date()) // "object"

function Person() {}
const person = new Person();
console.log(person instanceof Person); // true

const arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

const date = new Date();
console.log(date instanceof Date); // true

function myInstanceof(Fn, obj) {
  // 获取该函数显示原型
  const prototype = Fn.prototype;
  // 获取obj的隐式原型
  let proto = obj.__proto__;
  // 遍历原型链
  while (proto) {
    // 检测原型是否相等
    if (proto === prototype) {
      return true;
    }
    // 如果不等于则继续往深处查找
    proto = proto.__proto__;
  }
  return false;
}

var simpleStr = "This is a simple string";
var newStr    = new String("String created with constructor");

simpleStr instanceof String; // 返回 false, 非对象实例，因此返回 false
newStr    instanceof String; // 返回 true

console.log(("1").constructor === String);
console.log((1).constructor === Number);
console.log((true).constructor === Boolean);
// console.log((null).constructor === Null);
// console.log((undefined).constructor === Undefined);
console.log(([]).constructor === Array);
console.log((function() {}).constructor === Function);
console.log(({}).constructor === Object);

function Fn() {};
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor === Fn);
console.log(f.constructor === Array);

function type(obj) {
    return Object.prototype.toString.call(obj);
}

console.log(type("aaa")); [object String]
console.log(type(1)); [object Number]
console.log(type(true)); [object Boolean]
console.log(type(null)); [object Null]
console.log(type(undefined)); [object Undefined]
console.log(type([])); [object Array]
console.log(type(function () {})); [object Function]
console.log(type({})); [object Object]

// createCounter 利用闭包实现counter对外部隐藏，并提供封装的对外接口
function createCounter() {
    // count 是 createCounter 的局部变量，只能在 createCounter 内部访问
    // 它不会暴露到外部，实现了数据的隐藏
    let count = 0;
    return {
        // increment 方法通过闭包实现在不同的执行上下文调用时访问并修改 count 变量，实现自增
        increment: function () {
            count++;
        },
        // decrement 方法通过闭包实现在不同的执行上下文调用时访问并修改 count 变量，实现自减
        decrement: function () {
            count--;
        },
        // getCount 方法通过闭包实现在不同的执行上下文调用时能访问 count 变量
        getCount: function () {
            return count;
        }
    };
}

const counter = createCounter();

counter.increment();
counter.decrement();
console.log(counter.getCount()); // 输出: 0

// 无法直接访问 count 变量
// console.log(counter.count); // 输出: undefined

function makeCoffee(bean, sugar, milk) {
    return `您选择了${bean}咖啡豆，加入${sugar}克糖和${milk}毫升牛奶。`;
}

//标准的
function curryMakeCoffee(fn) {
    return function (bean) { // 第一步：选择咖啡豆
        return function (sugar) { // 第二步：决定糖的数量
            return function (milk) { // 第三步：加入牛奶
                return fn(bean, sugar, milk); // 执行原始函数
            };
        };
    };
}

const curriedMakeCoffee = curryMakeCoffee(makeCoffee);

// const myCoffee = curriedMakeCoffee('哥伦比亚')(10)(50);
// console.log(myCoffee); // 输出: 您选择了哥伦比亚咖啡豆，加入10克糖和50毫升牛奶。

const chooseBean = curriedMakeCoffee('哥伦比亚');
// 稍后再决定糖的数量
const addSugar = chooseBean(10);
// 最后决定牛奶的量
const finalCoffee = addSugar(50);
console.log(finalCoffee); // 同样的输出


// smartCurry 函数实现了通用的函数柯里化（Curry）功能，支持多参数一次性传递
// 柯里化：把接受多个参数的函数，转化为一系列只接受一个或部分参数的函数，并且每次调用后返回一个新函数，直到参数足够执行原始函数
// 这里用到了闭包：每次调用 curried 或返回的新函数时，都会“记住”之前传入的参数 args，形成闭包环境，直到参数收集齐全
function smartCurry(fn) {
    // curried 是递归函数，每次调用都保存当前已收集的参数 args
    return function curried(...args) {
        // fn.length 是原始函数参数个数，判断当前收集的参数是否足够
        if (args.length >= fn.length) {
            // 参数足够，直接调用原始函数 fn，并传入所有参数
            //使用apply 保证 this 始终指向调用者
            return fn.apply(this, args);
        } else {
            // 参数不够，返回一个新函数，继续收集剩余参数
            // 这里用到了闭包，args 会被“记住”，下次调用时会和新参数合并
            return function (...moreArgs) {
                // 递归调用 curried，合并之前的参数和新参数
                //使用apply 保证 this 始终指向调用者
                return curried.apply(this, [...args, ...moreArgs]);
            };
        }
    };
}

// 以 makeCoffee 为例，原始函数有3个参数
const smartCurriedMakeCoffee = smartCurry(makeCoffee);

//同时决定咖啡类型和糖的数量
// 第一次调用传入2个参数，返回一个新函数，等待最后一个参数
const chooseBeanAndAddSugar = smartCurriedMakeCoffee('哥伦比亚', 10);

//最后决定牛奶的量
// 第二次调用传入剩下的参数，参数收集齐全，执行原始函数
const finalCoffee2 = chooseBeanAndAddSugar(50);
console.log(finalCoffee2);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="btn1">按钮 1</button>
    <button id="btn2">按钮 2</button>
    <script>
        // createClickListener 是一个工厂函数，接收一个 message 参数
        // 返回一个新的函数，这个新函数作为事件处理器使用
        // 这里用到了闭包：返回的函数会“记住”message，即使外部 createClickListener 已经执行完毕
        function createClickListener(message) {
            // 返回的匿名函数作为事件处理函数
            // 由于闭包，message 会被保存在函数的词法作用域中
            return function () {
                alert(message); // 这里访问的 message 就是闭包保存下来的
            };
        }

        // 获取页面上的按钮元素
        const btn1 = document.getElementById('btn1');
        const btn2 = document.getElementById('btn2');

        // 给按钮1添加点击事件，事件处理函数是 createClickListener 返回的闭包
        // 当点击按钮1时，会弹出“你点击了按钮 1”
        btn1.addEventListener('click', createClickListener('你点击了按钮 1'));

        // 给按钮2添加点击事件，事件处理函数是 createClickListener 返回的闭包
        // 当点击按钮2时，会弹出“你点击了按钮 2”
        btn2.addEventListener('click', createClickListener('你点击了按钮 2'));
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="btn1">按钮 1</button>
    <button id="btn2">按钮 2</button>
    <script>
        // createClickListener 是一个工厂函数，接收一个 message 参数
        // 返回一个新的函数，这个新函数作为事件处理器使用
        // 这里用到了闭包：返回的函数会“记住”message，即使外部 createClickListener 已经执行完毕
        function createClickListener(message) {
            // 返回的匿名函数作为事件处理函数
            // 由于闭包，message 会被保存在函数的词法作用域中
            return function () {
                alert(message); // 这里访问的 message 就是闭包保存下来的
            };
        }

        // 获取页面上的按钮元素
        const btn1 = document.getElementById('btn1');
        const btn2 = document.getElementById('btn2');

        // 给按钮1添加点击事件，事件处理函数是 createClickListener 返回的闭包
        // 当点击按钮1时，会弹出“你点击了按钮 1”
        btn1.addEventListener('click', createClickListener('你点击了按钮 1'));

        // 给按钮2添加点击事件，事件处理函数是 createClickListener 返回的闭包
        // 当点击按钮2时，会弹出“你点击了按钮 2”
        btn2.addEventListener('click', createClickListener('你点击了按钮 2'));
    </script>
</body>

</html>

/**
 * 自定义模拟实现 new 操作符
 * @param {Function} constructor 构造函数
 * @param  {...any} args 构造函数的参数
 * @returns {Object} 新创建的对象
 */
function myNew(constructor, ...args) {
    // 1. 创建一个空对象，该对象将作为实例返回
    const newInstance = {};
    // 2. 将新对象的原型(__proto__)指向构造函数的 prototype 属性
    //    这样新对象就可以访问构造函数原型上的属性和方法
    newInstance.__proto__ = constructor.prototype;
    // 3. 执行构造函数，将 this 绑定到新对象，并传入参数
    //    构造函数可能会有返回值，用 res 接收
    const res = constructor.apply(newInstance, args);
    // 4. 如果构造函数返回的是对象（非原始值），则返回该对象
    //    否则返回新创建的对象 newInstance
    return typeof res === 'object' && res !== null ? res : newInstance;
}

// 测试代码
/**
 * 构造函数 Person
 * @param {string} name 姓名
 * @param {number|string} age 年龄
 */
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.info = function () {
        console.log(`My name is ${this.name}, I' ${this.age} years old`);
    }
}

const person = myNew(Person, "C", '21');
person.info();