后盾人JS -- 原型

news/2025/2/4 5:38:21 标签: javascript

没有原型的对象

也有没有原型的对象

<!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


http://www.niftyadmin.cn/n/5841267.html

相关文章

.Net Core笔记知识点（跨域、缓存）

.Net Core笔记知识点（跨域、缓存）

设置前端跨域配置示例&#xff1a; builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…
阅读更多...
Linux系统如何查看文件类型

Linux系统如何查看文件类型

一、查看指定文件类型 在Linux系统上&#xff0c;有很多种方式可以查看文件类型&#xff0c;下面是几种常见的方式 1.file命令 file命令是在Linux系统专门查看文件类型的工具&#xff0c;通过分析文件的内容特征来判断文件类型 基本语法 file [选项] 文件名示例 查看exam…
阅读更多...
【PDF提取局部内容改名】批量获取PDF局部文字内容改名 基于QT和百度云api的完整实现方案

【PDF提取局部内容改名】批量获取PDF局部文字内容改名 基于QT和百度云api的完整实现方案

应用场景 1. 档案管理 在企业或机构的档案管理中&#xff0c;常常会有大量的 PDF 格式的文件&#xff0c;如合同、报告、发票等。这些文件的原始文件名可能没有明确的标识&#xff0c;不利于查找和管理。通过批量获取 PDF 局部文字内容并改名&#xff0c;可以根据文件中的关键…
阅读更多...
并行计算、分布式计算与云计算：概念剖析与对比研究（表格对比）

并行计算、分布式计算与云计算：概念剖析与对比研究（表格对比）

什么是并行计算&#xff1f;什么是分布计算&#xff1f;什么是云计算&#xff1f;我们如何更好理解这3个概念&#xff0c;我们采用概念之间的区别和联系的方式来理解&#xff0c;做到切实理解&#xff0c;深刻体会。 1、并行计算与分布式计算 并行计算、分布式计算都属于高性…
阅读更多...
树莓派pico入坑笔记，触摸引脚

树莓派pico入坑笔记，触摸引脚

这里主要是扒一扒官方是如何实现触摸引脚的功能的&#xff0c;rp2040本身是不支持触摸传感的&#xff0c;那么官方是怎么实现的呢&#xff0c;这件事一直困扰着我&#xff0c;在官方给出的使用中&#xff0c;要求外接一颗至少为1M欧姆的电阻下拉&#xff0c;然后就可以使用触摸…
阅读更多...
JavaScript系列（55）--安全编程实践详解

JavaScript系列（55）--安全编程实践详解

JavaScript安全编程实践详解 &#x1f512; 今天&#xff0c;让我们聚焦于另一个同样重要的主题&#xff1a;JavaScript的安全编程实践。在当今的网络环境中&#xff0c;安全性已经成为应用开发中不可忽视的关键要素。 安全编程基础概念 &#x1f6e1;️ &#x1f4a1; 小知识…
阅读更多...
亚博microros小车-原生ubuntu支持系列：20 ROS Robot APP建图

亚博microros小车-原生ubuntu支持系列：20 ROS Robot APP建图

依赖工程 新建工程laserscan_to_point_publisher src/laserscan_to_point_publisher/laserscan_to_point_publisher/目录下新建文件laserscan_to_point_publish.py #!/usr/bin/env python3import rclpy from rclpy.node import Node from geometry_msgs.msg import PoseStam…
阅读更多...
解析PHP文件路径相关常量

解析PHP文件路径相关常量

PHP文件路径相关常量包括以下几个常量&#xff1a; __FILE__&#xff1a;表示当前文件的绝对路径&#xff0c;包括文件名。 __DIR__&#xff1a;表示当前文件所在的目录的绝对路径&#xff0c;不包括文件名。 dirname(__FILE__)&#xff1a;等同于__DIR__&#xff0c;表示当前…
阅读更多...
最新文章

Copyright @ 2022~2023