关于闭包(完)笔记

爱学习的前端歌谣

发布于 2023-10-18 11:11:25

1420

发布于 2023-10-18 11:11:25

文章被收录于专栏：前端小歌谣

前言

大家好我是歌谣今天继续给大家带来关于闭包的讲解

层级化代码

const store={
    state:{
        a:1
    },
    mutation:{
        setA(state,num){
            state.a=num
        }
    }
}
store.setA(3)
store.setA=function(number){
    store.mutation.setA(store.state,number)
}

案例ul-li

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

var oListItems=document.querySelector("ul").querySelectorAll("li")
for(var i=0;i<oListItems.length;i++){
    oListItems[i].addEventListener("click",function(){
        console.log(i)
        console.log(oListItems[i].innerText)
    },false)
}

运行结果

立即执行函数

var oListItems=document.querySelector("ul").querySelectorAll("li")
for(var i=0;i<oListItems.length;i++){
    (function(i){
        oListItems[i].addEventListener("click",function(){
            console.log(i)
            console.log(oListItems[i].innerText)
        },false)
    }(i))
}

运行结果

let解决

var oListItems=document.querySelector("ul").querySelectorAll("li")
for(let i=0;i<oListItems.length;i++){
    // (function(i){
    //     oListItems[i].addEventListener("click",function(){
    //         console.log(i)
    //         console.log(oListItems[i].innerText)
    //     },false)
    // }(i))
    oListItems[i].addEventListener("click",function(){
        console.log(i)
        console.log(oListItems[i].innerText)
    },false)
}

运行结果

构造函数案例

function UserInfo(info){
    this.username=info.username
    this.age=info.age
    this.getInfo=(key)=>{
        return this[key]
    }
    this.setInfo=(key,value)=>{
        this[key]=value
    }
}
const {getInfo,setInfo}=new UserInfo({
    username:"geyao",
    age:"18"
})
console.log(getInfo,"getInfo is")


console.log(getInfo('username'))
console.log(getInfo('age'))

运行结果

原型链写法

function UserInfo(info){
    this.username=info.username
    this.age=info.age
    // this.getInfo=(key)=>{
    //     return this[key]
    // }
    // this.setInfo=(key,value)=>{
    //     this[key]=value
    // }
}
UserInfo.prototype.getInfo=function(key){
    return this[key]
}
UserInfo.prototype.setInfo=function(key,value){
    this[key]=value
}
const userInfo=new UserInfo({
    username:"geyao",
    age:"18"
})
console.log(userInfo.getInfo('username'))
console.log(userInfo.getInfo('age'))
userInfo.setInfo('username',"fangfang")
userInfo.setInfo('age',19)
console.log(userInfo.getInfo('username'))
console.log(userInfo.getInfo('age'))

运行结果

类组件写法

class UserInfo{
    constructor(info){
        this.username=info.username,
        this.age=info.age
    }
    getInfo=(key)=>{
        return this[key]
    }
    setInfo=(key,value)=>{
        this[key]=value
    }
}
const {getInfo,setInfo}=new UserInfo({
    username:"geyao",
    age:18
})
console.log(getInfo('username'))
console.log(getInfo('age'))
setInfo('username',"fangfang")
setInfo('age',19)
console.log(getInfo('username'))
console.log(getInfo('age'))

运行结果

usestate实现单个

const root = ReactDOM.createRoot(document.querySelector('#app'));
root.render(<App />)
const MyReact = (() => {
    let _state;
    function useState(initialState) {
        _state = _state === undefined ? initialState : _state
        const _setState = function (newState) {
            if(typeof newState==='function'){
                _state=newState(_state)
            }else{
                _state = newState
            }
           
            render()
           
        }
        return [_state, _setState]
    }
    function render() {
        root.render(<App />)
    }
    return{
        useState
    }
})()


const { useState } = MyReact
function App() {
    const [title, setTitle] = useState("this is a title")
    const [content, setContent] = useState("this is a content")
    return (
        <div>
            <h1>{title}</h1>
            <button onClick={() => setTitle("这是标题")}>set title</button>
            <p>{content}</p>
            <button onClick={() => setContent("这是内容")}>set content</button>
        </div>
)
}

运行结果

usestate实现多个

const root = ReactDOM.createRoot(document.querySelector('#app'));
root.render(<App />)
const MyReact = (() => {
    const state=[]
    const stateSetters=[]


    let stateIndex=0
    function createState(initialState,index){
        return state[index]?state[index]:initialState
    }
    function createStateSetter(index){
        return function(newState){
            if(typeof newState==='function'){
                state[index]=newState(state[index])
            }else{
                state[index]=newState
            }
            render()
        }
    }
    function useState(initialState){
        state[stateIndex]=createState(initialState,stateIndex)
        if(!stateSetters[stateIndex]){
            stateSetters.push(createStateSetter(stateIndex))
        }
        const _state=state[stateIndex]
        const _setState=stateSetters[stateIndex]
        stateIndex++
        
        return [_state,_setState]
    }
    console.log(state,stateSetters)
    // function useState(initialState) {
    //     _state = _state === undefined ? initialState : _state
    //     const _setState = function (newState) {
    //         if(typeof newState==='function'){
    //             _state=newState(_state)
    //         }else{
    //             _state = newState
    //         }
           
    //         render()
           
    //     }
    //     return [_state, _setState]


    // }
    
    return{
        useState
    }
    function render() {
        stateIndex=0
        root.render(<App />)
    }


   
})()


const { useState } = MyReact


function App() {
    const [title, setTitle] = useState("this is a title")
    const [content, setContent] = useState("this is a content")
    return (
        <div>
            <h1>{title}</h1>
            <button onClick={() => setTitle("这是标题")}>set title</button>
            <p>{content}</p>
            <button onClick={() => setContent("这是内容")}>set content</button>
        </div>
)
}

运行结果