当前位置：首页 > news >正文

后盾人JS -- 原型

news 2025/7/8 9:05:20

没有原型的对象

也有没有原型的对象

<!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><script>let xj = {name:"向军"}console.log(xj)console.log(xj.hasOwnProperty("name"))//完全数据字典对象let hd = Object.create(null,{name:{value:"后盾人"}}) console.log(hd.hasOwnProperty("name"))</script>
</body>
</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><script>let hd = {show(){console.log("后盾人")}}hd.__proto__.render = function(){}hd.render()</script>
</body>
</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><script>console.log(User)User.prototype.show = function(){console.log("后盾人")}let hd = new User()console.log(User.prototype == hd.__proto__)console.log(hd)function User(){}User.__proto__.view = function(){console.log('User function view method')}
</script>
</body>
</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><script>let hd = new Object()hd.name = "后盾人"Object.prototype.show= function(){console.log("houdunren")}function User(){}console.dir(User)console.log(User.prototype.__proto__ == User.__proto__.__proto__)console.dir(Object.prototype)</script>
</body>
</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><script>let hd = {}    //Objectconsole.log(hd.__proto__ == Object.prototype)let arr = []console.log(arr.__proto__ == Array.prototype)let str = ""console.log(str.__proto__ == String.prototype)</script>
</body>
</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><script>let hd = {name:"hd"}let parent = {name:"parent",show(){console.log('partent method' + this.name)}} Object.setPrototypeOf(hd,parent)    //认爹console.log(Object.getPrototypeOf(hd))</script>
</body>
</html>

原型中的constructor引用

<!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><script>function User(name){this.name = name}console.dir(User)console.log(User.prototype.__proto__)console.log(User.prototype.constructor == User)let lisi = new User.prototype.constructor("李四")console.log(lisi)</script>
</body>
</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><script>function User(name){this.name = namethis.show = function(){console.log(this.name)}}let hd = new User("后盾人")console.log(hd)function createByObject(obj,...args){const constructor = Object.getPrototypeOf(obj).constructorreturn new constructor(...args)}let xj = createByObject(hd,"向军")xj.show()
</script>
</body>
</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><script>let a = {}let b = {}console.log(b.__proto__.isPrototypeOf(a))Object.setPrototypeOf(a,b)      //b是a爹console.log(b.isPrototypeOf(a))</script>
</body>
</html>

属性检测差异

修改 Object.prototype 会对所有对象产生影响，因为所有对象都继承自 Object.prototype

in会检测当前对象和原型链

hasOwnProperty只检测当前对象

<!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><script>let a = {url:"houdunren"}let b = {name:"后盾人"}console.log("url" in a)Object.prototype.web = "hdcms.com"console.log("web" in a)Object.setPrototypeOf(a,b)console.log("name" in  a)console.log(a.hasOwnProperty("url"))</script>
</body>
</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><script>let hd = {data:[1,2,3,4,5]}Object.setPrototypeOf(hd,{max(){return this.data.sort((a,b)=>b-a)[0]}})console.log(hd.max())let xj = {lessons:{js:87,php:63,node:99,linux:88},get data(){return Object.values(this.lessons)}}console.log(hd.max.apply(xj))</script>
</body>
</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><script>let hd = {data:[1,2,3,4,5]}console.log(Math.max.call(null,...hd.data))let xj = {lessons:{js:87,php:63,node:99,linux:88},}console.log(Math.max.apply(null,Object.values(xj.lessons)))</script>
</body>
</html>

DOM结点借用Array原型方法

<!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><button message="后盾人" class="red">后盾人</button><button message="hdcms">hdcms</button><script>let arr = [1,3,43]let res = arr.filter(item => {return item > 39})console.log(arr.filter)console.log(res)let btns = document.querySelectorAll("button")console.log(btns.filter)btns = Array.prototype.filter.call(btns,item=>{return item.hasAttribute("class")})console.log(btns[0].innerHTML)</script>
</body>
</html>

this和原型没关系

this和原型是没有关系的

<!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><script>let hd = {name:"后盾人",show(){console.log(this.name)}}let User = {name:'向军'}Object.setPrototypeOf(hd,{})console.log(hd.show())</script>
</body>
</html>

使用原型最好用get，set这种方法

__proto__严格意义上不算属性，有getter和setter

查看全文

http://www.lryc.cn/news/531213.html