前言

我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是原型的讲解

环境配置

npm init -y
yarn add vite -D

修改page.json配置端口

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

声明方式

const obj={}

function Obj1(){}

const obj1=new Obj1()

const obj2=Object.create(null)

const obj3=new Object()

console.log(obj,obj1,obj2,obj3)

运行结果

前端歌谣-第七课-关于原型_Test

原型案例

function Test(){
    this.a=1;
    this.b=2;
}
Test.prototype.c=3
Test.prototype.d=4

Object.prototype.e=5
Object.prototype.f=6

const test=new Test()
console.log(test)

运行结果

前端歌谣-第七课-关于原型_ci_02

原型案例

function test(){}
console.dir(test.__proto__===Function.prototype)
console.log(Function.__proto__===Function.prototype)

function Test1(){
    this.a=1
}

Test1.prototype.b=2

const test1=new Test1()
//test.__proto__

const testPrototype=Object.getPrototypeOf(test1)
console.log(testPrototype===test1.__proto__)

const obj={
    a:1
}
Object.setPrototypeOf(obj,{
    b:1
})
console.log(obj)

运行结果

前端歌谣-第七课-关于原型_ci_03

对象参数属性

const obj=Object.create({
    a:1,
    b:2
},{
    a:{
        value:3,
        writable:false,
        configurable:true,
        enumerable:true
    }
})
console.log(obj)

监听状态改变

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>

    </h1>
    <h2></h2>
    <p></p>
    <span></span>
    <script type="module" src="./index5.js"></script>
</body>
</html>

index5.js

import { useReacttive, useWatcher } from "./Delfin.js"

const state = useReacttive({
    title: `This is title`,
    content: `This is content`
})

function render() {
    document.querySelector("h1").innerText = state.title
    document.querySelector("h2").innerText = state.title

    document.querySelector("p").innerText = state.content
    document.querySelector("span").innerText = state.content
}
render()


useWatcher([
    document.querySelector('h1'), document.querySelector('h2')
],'title',(prev,cur)=>{
    console.log(prev,cur)
})

useWatcher([
    document.querySelector('p'), document.querySelector('span')
],'content',(prev,cur)=>{
    console.log(prev,cur)
})

setTimeout(()=>{
    state.title="这是标题",
    state.content="这是内容"
},1000)

delfin.js

import WatcherMap from "./WacthMap"
import Watcher from './Watcher'

const watcherMap=new WatcherMap()
export function useReacttive(state){
   return new Proxy(state,{
    get(target,key){
        return Reflect.get(target,key)
    },
    set(target,key,value){
        watcherMap[key].update(target[key],value)
        return Reflect.set(target,key,value)
    }
   })
}

export function useWatcher(collection,dep,callback){
   const watcher=new Watcher()
   watcher.set(collection,callback)
   watcherMap.set(dep,watcher)
}

WatchMap.js

export default function WactherMap(){

}

WactherMap.prototype.set=function(dep,watcher){
    this[dep]=watcher;
}

Wacther.js

export default function Watcher(){
   this.collection=[];
   this.cb=null
}

Watcher.prototype.set=function(collection,callback){
   this.collection=collection
   this.cb=callback
}

Watcher.prototype.update=function(prevValue,currentValue){
  this.collection.forEach(el=>{
    el.innerText=currentValue
  })
  this.cb[prevValue,currentValue]
}

运行结果

前端歌谣-第七课-关于原型_ci_04


前端歌谣-第七课-关于原型_ci_05