javascript知识收集

庐江左衡

已于 2024-04-19 11:29:42 修改

阅读量238

点赞数 3

文章标签：原型模式 javascript 开发语言

于 2024-04-09 16:30:08 首次发布

本文链接：https://blog.csdn.net/qq_38359639/article/details/137540125

版权

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]
返回结果为[false,true].
首先prototype属性是函数才有的属性，对象是没有的，对象要想访问原型对象需要用object.__proto__,因此a.prototype返回undefined,因为a是一个对象，它没有prototype属性.Object.getPrototypeOf(a)相当于a.__proto__,所有用Object()创建的对象它们的原型对象都指向同一个对象(包括字面量形式创建的对象),因此Object.getPrototypeOf(a) === b返回true.

var a =/678/ ,b=/678/ a==b a===b

变量a和b都是正则表达式对象，它们的值都是/678/。在JavaScript中，使用==运算符比较两个对象时，会比较它们的引用是否相等，而不是比较它们的值是否相等。因此，a==b的结果是false，因为a和b是两个不同的对象。

而使用===运算符比较两个对象时，不仅会比较它们的引用，还会比较它们的值。因此，a===b的结果也是false，因为a和b是两个不同的对象。

require和import的区别

加载方式。require是在运行时加载，这意味着模块的引入发生在代码执行时，可以在代码的任意位置使用；import是在编译时加载，这表示模块的引入发生在代码编译阶段，必须放在文件的顶部，且不能在条件语句或函数作用域中使用。

规范。require遵循的是CommonJS规范，它是针对服务器环境的模块化方案；import遵循的是ES6（ECMAScript 2015）标准，它是现代Web开发中常用的模块化方案。

动态性。require导入的是对导出值的拷贝，这意味着如果模块内部导出的值发生变化，那么require导入的值不会受到影响；import导入的是对导出值的引用，如果模块内部导出的值发生变化，那么import导入的值也会随之改变。

特点。require是社区方案，只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化；import是语言规格层面支持模块功能，支持编译时静态分析，便于JS引入宏和类型检验，适合用于支持ES6模块化语法的现代浏览器和Node.js环境。

输出结果为：s1 == s2 return true

第一个if语句使用"=="运算符比较s1和s2，由于s1和s2的值相同，所以返回true。

第二个if语句使用equals()方法比较s1和s2，但是在JavaScript中，字符串对象没有equals()方法，所以会报错无返回。

合法的url正则:/^((https|http|ftp|rtsp|mms)?:\/\/)(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]{2,6})(:\d+)?(\/.*)?(\?.*)?(#.*)?$/

寄生组合继承

function Human(name) {

        this.name = name

        this.kingdom = 'animal'

        this.color = ['yellow', 'white', 'brown', 'black']

}

Human.prototype.getName = function(){

        return this.name

}

function Chinese(name,age) {

        Human.call(this,name)

        this.color = 'yellow'

        this.age=age

}

Chinese.prototype = Object.create(Human.prototype);

Chinese.prototype.constructor = Chinese

 Chinese.prototype.getAge=function(){

        return this.age

};

发布订阅模式

class EventEmitter {

  constructor() {

    this.eventBus = {}

  }



  on(eventName, event) {

    if (this.eventBus[eventName]) {

      this.eventBus[eventName].push(event)

    } else {

      this.eventBus[eventName] = [event]

    }

  }



  emit(eventName) {

    if (this.eventBus[eventName]) {

      this.eventBus[eventName].forEach((event) => {

        event()

      })

    }

  }

}

观察者模式

class Observerd {
       constructor(name, state){
           this.name = name;
           this.state = state;
           this.observers = [];
       }
                 
       setObserver(observer){
            this.observers.push(observer);
       }
                 
       setState(newState){
            this.state = newState;
            this.observers.forEach((obj, index) => {
                  obj.update(this.name, this.state);
             });
       }
}
 
class Observer {
       update(name, state){
             console.log(`${name}正在${state}`);
       }
}

Array.map

Array.prototype._map = function(Fn) {
    let result = [];
    this.forEach(item => {
        result.push(Fn(item));
    })
    return result;
}

Array.filter

Array.prototype._filter=function(fn){
    let arr=this
    let newArr=[]
    for(let i=0;i<arr.length;i++){
        if(fn(arr[i])) newArr.push(arr[i])
    }
    return newArr
}

Array.reduce

Array.prototype._reduce=function(fn){
    let sum=0;
    this.map(i=>{
        sum=fn(sum,i)
    });
    return sum
}

_objectCreate

Object.prototype._objectCreate=function(proto){
    return (()=>{}).prototype = proto;
}

_call函数

Function.prototype._call = function(context,...args) {
        context = context || window;
        context.fn = this;
        const result = context.fn(...args)
        delete context.fn
        return result;
}

Function.bind

Function.prototype._bind = function(context,...arg1){
    let _this = this;
    return function(...arg2){
        return _this.call(context,...arg1,...arg2)
    }
}

实现new操作符

const _new = function (constructor, ...args) {
    // new关键字做了4件事
    // 1. 创建一个新对象
    const obj = {};
    // 2. 为新对象添加属性__proto__，将该属性链接至构造函数的原型对象
    obj.__proto__ = constructor.prototype;
    // 3. 执行构造函数，this被绑定在新对象上
    const res = constructor.apply(obj, args);
    // 4. 确保返回一个对象
    return res instanceof Object ? res : obj;
};

Object.freeze

const _objectFreeze = object => {
    // 补全代码
    let props = Object.getOwnPropertyNames(object)
    for (let prop of props) {
        const des = Object.getOwnPropertyDescriptor(object, prop)
        if (des.get || des.set) {
            Object.defineProperty(object, prop, {
                configurable: false,
                get: des.get,
                set: des.set
            })
        } else {
            Object.defineProperty(object, prop, {
                writable: false,
                configurable: false
            })
        }
    }
    return Object.preventExtensions(object)
    // return Object.seal(object)
}

浅拷贝

const _shallowClone = target => {
      // 补全代码
      return Object.assign({}, target)
}

简易深拷贝

const _sampleDeepClone = target => {
    if(typeof target !== "object" || target === null) return target;
    let res = target instanceof Array ? [] : {};
    for(const key in target) {
        res[key] = _sampleDeepClone(target[key]);
    }
    return res;
}

深拷贝

const _completeDeepClone = (target, map = new Map()) => {
                // 补全代码
                if(map.get(target)){
                    return map.get(target)
                }
                if(typeof target === 'object' || typeof target === 'function'){
                    let dist
                if(target instanceof Array){
                    dist = new Array()
                }else if(target instanceof Function){
                    dist = function(...args){
                        return target.call(null,...args)
                    }
                }else if(target instanceof RegExp){
                    dist = new RegExp(target.source,target.flag)
                }else if(target instanceof Date){
                    dist = new Date(target)
                }else {
                    dist = new Object
                }
                map.set(target,dist)
                for(let key in target){
                    if(target.hasOwnProperty(key)){
                        dist[key] = _completeDeepClone(target[key],map)
                    }
                }
                    return dist
                }else{
                    return target
                }
                 
}