手写一个自己的Promise（二）

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量890 收藏 14
点赞数 22
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45231569/article/details/139159933
版权

系列文章目录

根据PromiseA+规范，自己手动实现一个Promise

文章目录

前言

在上一篇文章中，我们已经实现了MyPromise构造器部分的相关代码，本篇文章则着重实现then方法的回调执行时机

一、then方法

根据promise A+规范中的描述总结，大致归纳为下述内容

  • onFulfilled（可选）：一个在此 Promise 对象被兑现时异步执行的函数。它的返回值将成为 then() 返回的Promise对象的兑现值。此函数被调用时将传入参数value（代表Promise 对象的兑现值）。
  • onRejected（可选）：一个在此Promise 对象被拒绝时异步执行的函数。它的返回值将成为 catch() 返回的 Promise对象的兑现值。此函数被调用时将传入参数reason（表示Promise 对象被拒绝的原因）。
  • 返回值：立即返回一个新的 Promise 对象。

二、开始手动实现

思路：
首先，创建一个then方法，它接收两个函数作为参数，分别是onFulfilled和onRejected，之后返回一个MyPromise实例，在实例中，通过判断此时MyPromise的状态是成功态（resolve）还是失败态（reject）来决定具体是执行onFulfilled还是onRejected，无论执行哪个回调，都会将当前promise的结果作为参数传进去。
根据上述思路可以完成下面的代码

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
    }

    then(onFulfilled, onRejected) {  // onFulfilled和onRejected是外部通过then方法传入的成功与失败对应的执行函数
        return new MyPromise((resolve, reject) => { // resolve与reject是当前返回的MyPromise实例的成功与失败回调
            if (this.#state === FULFILLED) { // 如果是成功，执行onFulfilled函数
                onFulfilled(this.#result)
            } else if (this.#state === REJECTED) // 如果是失败，执行onRejected函数
                onRejected(this.#result)
        })
    }
}

根据上述思路执行一下代码，会发现控制台能够正常输出的。（状态是pending没变化是正常的，因为还没写到修改状态的步骤）
此时控制台的输出结果
但如果此时是异步传入结果呢？
请添加图片描述

通过一个setTimeout将resolve包裹起来就会发现，控制台没有输出了，这是因为是此时是异步传入结果，所以当知道可以具体执行哪个回调函数时，then方法的执行早就已经结束了，自然也就没办法再次执行具体的回调函数了。

解决思路：
要解决上面的问题也很简单，就是在then方法中不再直接执行具体的回调，而是先定义一个参数handlers将onFulfilled, onRejected,resolve与reject四个回调函数保存起来，等得知具体执行结果后再根据情况进行调用，如图中所示，值得注意的是，因为then方法可以进行多次调用，因此将handlers属性设置为一个数组会更为合适。此外，再额外定义一个run方法专门用于执行then方法中传递的回调，而在改变状态的changeState方法与then方法中调用这个run方法即可。
请添加图片描述

根据思路可以将代码完善如下

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    #handlers = []  // 定义一个参数handler数组，用来存储then方法中传入的回调函数

    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        // 占位
    }

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
        this.#run()  // 执行定义好的run方法，以确保能执行then方法中异步传入结果的回调函数也能正常执行
    }

    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlers.push({ // 向handlers数组中添加then方法中传入的每一组回调函数
                onFulfilled, onRejected, resolve, reject
            })
            this.#run()  // 直接执行
        })
    }
}

实现了上述逻辑后，就该具体分析一下run方法内应该如何执行了，首先判断此时Promise的状态，如果还是pending，说明还没进行过状态变更，后续代码不用执行，直接返回即可；如果状态不再是pending，此时，对handlers进行循环遍历，依次取出handlers数组中的每一项，再根据当前Promise的状态来决定是执行onFulfilled还是onRejected，同时将Promise的结果作为函数的参数传入。

class MyPromise {

    ...
    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                onFulfilled(this.#result)
            } else if (this.#state === REJECTED) {
                onRejected(this.#result)
            }
        }
    }
	...
}

好了，先执行一下，看看结果如何，首先是成功的回调
1秒钟后成功输出，没有问题
再看一下失败的情况1秒钟后也成功输出，没有问题
成功和失败的回调均能正常输出，没有问题，接下来改判断then方法中返回的Promise的状态了。（解决上图中MyPromise状态一直是pending）

代码写到这里。其实出现了三种情况，分别是：

  1. 外界调用then方法时，传递的回调onFulfilled和onRejected不是函数
  2. 外界调用then方法时，传递的回调onFulfilled和onRejected不是函数

逐个情况分析一下，首先第一种情况，当外部调用时传递的不是一个函数，比如是个字符串或者null，或者干脆什么也不传，根据ES6实现的Promise来看，此时返回的Promise的状态应该和调用then方法的Promise状态和结果保持一致，（也被称为Promise的穿透性）根据这种情况，我们可以在实现时判断，如果onFulfilled或onRejected不是一个函数时，判断此时MyPromise的状态，如果是成功态，则直接执行resolve，将此时的结果作为参数传入；如果是失败态，也直接调用reject函数，将结果作为原因传入，实现代码如下。

class MyPromise {

    ...
    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                if(typeof onFulfilled === 'function'){
                	onFulfilled(this.#result)
                }else{
					resolve(this.#result)
				}
            } else if (this.#state === REJECTED) {
                if(typeof onFulfilled === 'function'){
                	onRejected(this.#result)
                }else{
					reject(this.#result)
				}
            }
        }
    }

接下来就是第二种情况，即onFulfilled或onRejected是一个函数时，此时就需要运行这个函数，需要注意的是，此时应该进行判断，看onFulfilled或onRejected在运行过程中是否有报错，如果有报错，则应该执行reject，反正，正常运行则应该执行resolve。因此需要用try…catch包裹住执行函数，在try中正常执行函数，如果没有报错则把函数的返回结果保存下来，执行resolve并把这个返回结果作为resolve的参数传如；在catch中捕获报错，执行reject，并把错误原因作为参数传入reject。

// 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
#run() {
    if (this.#state === PENDING) return
    while (this.#handler.length) {
        const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
        if (this.#state === FULFILLED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onFulfilled(this.#result)  // 判断回调函数执行是否报错
                    resolve(data)
                } catch (error) {
                    reject(error)
                }
            } else {
                resolve(this.#result)
            }
        } else if (this.#state === REJECTED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onRejected(this.#result)
                    resolve(data)
                } catch (error) {
                    reject(error)
                }
            } else {
                reject(this.#result)
            }
        }
    }
}

接下来就是最后一种情况了，也就是执行了onFulfilled或onRejected后返回的还是一个Promise，此时具体执行的是resolve还是reject就得看返回的Promise的结果到底是成功还是失败了。因此首先需要检测执行函数返回结果是不是一个Promise，这里定义一个isPromiseLike的辅助函数专门判断处理，当判断返回结果是一个Promise时，调用返回结果的then方法，把resolve和reject方法作为返回结果的then方法的两个回调传进去，如果返回结果的Promise成功，就会调用resolve，失败就会调用reject。

// 判断是否是符合Promise A+规范的promise
#isPromiseLike(value) {
    return false // 先作为占位，之后再实现
}

#run() {
    if (this.#state === PENDING) return
    while (this.#handler.length) {
        const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
        if (this.#state === FULFILLED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onFulfilled(this.#result)
                    if (this.#isPromiseLike(data)) {  // 判断返回结果是否是一个Promise
                        data.then(resolve,reject)  // 是就执行返回结果的then方法
                    } else {
                        resolve(data)
                    }
                } catch (error) {
                    reject(error)
                }
            } else {
                resolve(this.#result)
            }
        } else if (this.#state === REJECTED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onRejected(this.#result)
                    if (this.#isPromiseLike(data)) {
                        data.then(resolve, reject)
                    } else {
                        resolve(data)
                    }
                } catch (error) {
                    reject(error)
                }
            } else {
                reject(this.#result)
            }
        }
    }
}

写到这里，我们会发现run方法中if与else if内的两中情况逻辑高度相似，完全可以抽离成一个单独的方法runOne，抽离后的代码如下。

#runOne(callback, resolve, reject) {  // callback 回调函数（onFulfilled||onRejected）
        if (typeof callback !== 'function') {  // 判断传入的回调函数是否是函数，不是则走穿透逻辑
            const settled = this.#state === FULFILLED ? resolve : reject // 定义一个变量settled，根据当前的state判断此次应该执行什么函数
            settled(this.#result)
            return;  // 确定不是函数，后面的逻辑也不会再走了
        }
        try {  
            const data = callback(this.#result)
            if (this.#isPromiseLike(data)) { // 回调函数正常执行且回调函数的返回结果是个Promise，需要调用返回结果的then方法，并把resolve和reject传进去，由返回结果的Promise判断应该执行哪个
                data.then(resolve, reject)
            } else {
                resolve(data)  // 回调函数正常执行且回调函数的返回结果不是个Promise，执行resolve
            }
        } catch (error) { 
            reject(error)   // 捕获到了回调函数执行时抛出的错误，此时无论state是什么都会执行reject
        }
    }

    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                this.#runOne(onFulfilled, resolve, reject) // 成功传递onFulfilled
            } else if (this.#state === REJECTED) {
                this.#runOne(onRejected, resolve, reject)// 失败传递onRejected
            }
        }
    }

逻辑抽离完成了，接下来改完善之前定义的用于判断是否是Promise的辅助函数。
根据Promise A+规范，不管是对象还是函数，只要它包含了一个叫做then的函数的属性,都可以叫Promise，因此判断方法也很简单

#isPromiseLike(value){
    if (value && (typeof value === 'object' || typeof value === 'function')) {
        return typeof value.then==='function'
    }
    return false
}

PS：为什么这里需要这个辅助函数而不是直接采用 data instanceof MyPromise进行判断呢？
答案：因为判断一个东西是否是Promise，应该是看它是不是满足Promise A+规范，Promise之间应该具有互操作性，比如ES6的Promise和我们创建的MyPromise直接就应该可以互相操作，但如果直接用 data instanceof MyPromise判断一个由ES6创建的Promise时，这个结果肯定是false，反之，如果用 data instanceof MyPromise判断一个由MyPromise创建的Promise时，结果也肯定是false，但实际上这两种情况都应该返回true才对，因此用instanceof判断无法满足这里的需要。

功能大致实现了，但还有一点需要注意，运行then方法中的回调应该是放在微队列里的，因此还需要一个辅助函数实现将方法放入微队列的功能，这里定义一个runMicroTask，具体实现逻辑参考vue源码，分成三种情况

  • node环境：用process.nextTick模拟微队列
  • 浏览器：用MutationObserver模拟微队列
  • 既不在浏览器也不在node环境，此时没办法了，因为微队列是环境提供的能力，脱离环境JS是无法实现的，因此只能用setTimeout作为替代
// 将任务放入异步队列里
    #runMicroTask(func) {
        if (typeof process === 'object' && typeof process.nextTick === 'function') {  // 模拟node环境微队列执行
            process.nextTick(func)
        } else if (typeof MutationObserver === 'function') {  // 模拟浏览器环境的微队列执行
            const ob = new MutationObserver(func)  // MutationObserver是一个观察器，它会自动将一个回调函数放入微队列
            const textNode = document.createTextNode('1')  // 构建一个文本节点用于观察器观察
            ob.observe(textNode, {  // 指定观察器观察的节点
                characterData: true // 观察字符的变化
            })
            textNode.data='2'  // 手动修改文本节点，当被观察的对象发生变化时，观察器会把回调放入微队列执行，从而实现模拟微队列
        } else {
            setTimeout(func, 0)  // 既不是node环境也不是浏览器，只能用setTimeout来实现异步了
        }
    }

	... 
	
    #runOne(callback, resolve, reject) { 
        this.#runMicroTask(() => {  // 将之前的逻辑通过一个箭头函数的形式放入runMicroTask实现模拟放入微队列
            if (typeof callback !== 'function') {  
                const settled = this.#state === FULFILLED ? resolve : reject 
                settled(this.#result)
                return; 
            }
            try {
                const data = callback(this.#result)
                if (this.#isPromiseLike(data)) { 
                    data.then(resolve, reject)
                } else {
                    resolve(data)  
                }
            } catch (error) {
                reject(error)   
            }
        })
    }
	...

ok，全部写完，找几个结果测试一下
请添加图片描述
成功在1秒后输出，状态也发生了改变

请添加图片描述
请添加图片描述

输出顺序也没有问题。

至此，基于Promise A+规范的MyPromise代码全部完成。Promise的其余方法，如catch,finally,resolve,reject,all等方法，这些都是ES6中额外加入的，Promise A+规范中并未对这些方法的实现有提及，因此这些方法的实现放在下一篇文章中。

总结

本篇文章，着重对MyPromise中的then方法的执行时机和返回结果进行了实现，并完成了检测是否是Promise和实现微队列效果的两个辅助函数。

最后，附上MyPromise的完整代码

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    #handler = []

    // 判断是否是符合Promise A+规范的promise
    #isPromiseLike(value) {
        if (value && (typeof value === 'object' || typeof value === 'function')) {
            return typeof value.then === 'function'
        }
        return false
    }

    // 将任务放入异步队列里
    #runMicroTask(func) {
        if (typeof process === 'object' && typeof process.nextTick === 'function') {  // 模拟node环境微队列执行
            process.nextTick(func)
        } else if (typeof MutationObserver === 'function') {  // 模拟浏览器环境的微队列执行
            const ob = new MutationObserver(func)  // MutationObserver是一个观察器，它会自动将一个回调函数放入微队列
            const textNode = document.createTextNode('1')  // 构建一个文本节点用于观察器观察
            ob.observe(textNode, {  // 指定观察器观察的节点
                characterData: true // 观察字符的变化
            })
            textNode.data='2'  // 手动修改文本节点，当被观察的对象发生变化时，观察器会把回调放入微队列执行，从而实现模拟微队列
        } else {
            setTimeout(func, 0)  // 既不是node环境也不是浏览器，只能用setTimeout来实现异步了
        }
    }

    #runOne(callback, resolve, reject) {  // callback 回调函数（onFulfilled||onRejected）
        this.#runMicroTask(() => {  // 将之前的逻辑通过一个箭头函数的形式放入runMicroTask实现模拟放入微队列
            if (typeof callback !== 'function') {  // 判断传入的回调函数是否是函数，不是则走穿透逻辑
                const settled = this.#state === FULFILLED ? resolve : reject // 定义一个变量settled，根据当前的state判断此次应该执行什么函数
                settled(this.#result)
                return;  // 确定不是函数，后面的逻辑也不会再走了
            }
            try {
                const data = callback(this.#result)
                if (this.#isPromiseLike(data)) { // 回调函数正常执行且回调函数的返回结果是个Promise，需要调用返回结果的then方法，并把resolve和reject传进去，由返回结果的Promise判断应该执行哪个
                    data.then(resolve, reject)
                } else {
                    resolve(data)  // 回调函数正常执行且回调函数的返回结果不是个Promise，执行resolve
                }
            } catch (error) {
                reject(error)   // 捕获到了回调函数执行时抛出的错误，此时无论state是什么都会执行reject
            }
        })
    }

    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                this.#runOne(onFulfilled, resolve, reject) // 成功传递onFulfilled
            } else if (this.#state === REJECTED) {
                this.#runOne(onRejected, resolve, reject)// 失败传递onRejected
            }
        }
    }

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
        this.#run()
    }

    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handler.push({
                onFulfilled, onRejected, resolve, reject
            })
            this.#run()
        })
    }
}
梦想的奢望
关注
  • 22
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写一个promise用法_手写一个Promise
weixin_28757113的博客
12-31 301
首先要确定Promise的几个特点Promise就是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即执行Promise有三个状态，分别为 成功 fulfilled 失败 rejected 等待pending (pending=>fulfilled pending=>rejected) 一旦状态确定就不可更改resolve 和reject函数是用来更改状态的 resolv...
教你如何手写一个Promise
ose_huang的博客
02-25 9461
promise的进阶，手写一个自己的promise
基于vue 手写一个promise
前端-尔嵘
03-14 162
【代码】基于vue 手写一个promise。
手写一个promise用法_手写一个promise的过程
weixin_39637975的博客
12-22 287
promise 的实现原理promise的三种状态pendingfulfilledrejectedclass Promise {constructor(executor) {// Promise接一个方法 (resolve，reject)=>{}// 开始的状态this.state = 'pending'// 成功的状态this.value = undefined// 失败的状态this....
手写一个promise用法_JS手写一个自定义Promise操作示例
weixin_39609071的博客
12-22 136
本文实例讲述了JS手写一个自定义Promise操作。分享给大家供大家参考，具体如下：经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突，这里就简单命名为MyPromise.class MyPromise {constructor(executor) {let _this...
手写实现一个Promise
Hoyiie的博客
03-05 1279
手写实现promise ，promise，promise api
【JavaScript】手写Promise
编码世界
05-15 4180
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
300秒带你手写一个promise
小陈的博客
05-18 5942
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
手写一个promise用法_手写一个Promise笔记
weixin_39603492的博客
12-22 138
手写Promise感觉还是挺常见的，这里记录下自己构建整个Promise的过程，主要参考的是后盾人Promise教程，记录下看完之后的笔记和个人的思考。Promise的基本知识Promise包含pending等待，fulfilled成功，rejected拒绝三种状态，当时pending状态的时候可以转换为成功/拒绝状态，并且转换后不能再转换。一个promise必须有一个then方法，then方法接...
手写一个Promise 并讲解
wylovely的博客
03-23 231
手写一个promise getContent:function (){ var that = this; this.update().then(function(){ console.log("123"); that.update() }) } updateKinds ({commit, state}) { return new Promise(function (resolve, reject) { axios.get('/bbg/shop/get_classify', {
JS手写一个自定义Promise操作示例
11-21
本文实例讲述了JS手写一个自定义Promise操作。分享给大家供大家参考，具体如下： 经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise 为了不...
如何从零开始利用js手写一个Promise库详解
10-18
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关...
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
原生js手写Promise
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1436
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1062
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 506
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1277
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
手写一个promise
03-20
很高兴为您提供一个手写的 Promise 实现，代码如下： class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值