后盾人JS -- 原型
没有原型的对象
也有没有原型的对象
<!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 = {} //Object
console.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 = name
this.show = function(){
console.log(this.name)
}
}
let hd = new User("后盾人")
console.log(hd)
function createByObject(obj,...args){
const constructor = Object.getPrototypeOf(obj).constructor
return 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