一文详解JavaScript中prototype的使用

2024-04-02 19:04:59 413人浏览独家记忆

摘要

目录prototype初步认识函数有prototype属性，函数创建的对象没有获得当前对象的属性父和子的扩展子的proto和prototype的区别扩展得到的东西到底从哪来的prot

prototype初步认识

在学习 javascript中，遇到了prototype，经过一番了解，知道它是可以进行动态扩展的

function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展

即最开始创建的函数Func并没有var1变量，但是我们可以进行扩展，并且让根据其创建的对象也有var1变量

函数有prototype属性，函数创建的对象没有

这个时候，尝试对var1变量进行扩展，但是居然报错了

function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')

获得当前对象的属性

那我们现在有一个疑问：func1应该是有var1变量的，那上面报错意思是func1没有prototype属性/方法咯？我如何查看一个对象到底有没有这个属性呢？

我们知道，可以用in来查看对象是否有属性

function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false

现在我们知道了，func1确实没有prototype属性/方法，那func1也就是函数创建的对象都不能扩展了吗？回答这个问题之前，我们还要明白一个问题，func1中的var1变量是自己的吗？怎么区分呢？

function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false
console.log("-----接下来看hasOwnProperty函数-----")
func1.var2 = "func1自己的变量"
console.log(func1.hasOwnProperty("var2")) //true
console.log(func1.hasOwnProperty("var1")) //false

我们可以用hasOwnProperty函数来知道变量是不是扩展的了

父和子的扩展

这里我把Func当成父，把func1当成子来作为个人理解

function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false
console.log("-----接下来看hasOwnProperty函数-----")
func1.var2 = "func1自己的变量"
console.log(func1.hasOwnProperty("var2")) //true
console.log(func1.hasOwnProperty("var1")) //false
console.log("-----接下来看proto-----")
console.log(Func.hasOwnProperty("__proto__")) //false
console.log(func1.hasOwnProperty("__proto__")) //false
console.log(func1.__proto__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // false
console.log(func1.__proto__.var1) //Func进行了扩展
console.log(func1.var1) //Func进行了扩展

这里可以看到func1本身没有__proto__属性，但是和Func的protype属性是一样的

子的proto和prototype的区别

到这里你肯定想问，对于子func1的__proto__和prototype有什么区别呢？

首先子func1并没有prototype属性

其实双下划线表示隐藏的，不太想让外界访问到，这么思考，父Func不仅创建了子func1，而且创建了子func2，这时候如果子func1通过__proto__修改了var1，那么父Func的var1跟着变化，并且func2的var1也会变化，但是如果func1直接修改var1，那么父Func和子func2的var1都不会变化

function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false
console.log("-----接下来看hasOwnProperty函数-----")
func1.var2 = "func1自己的变量"
console.log(func1.hasOwnProperty("var2")) //true
console.log(func1.hasOwnProperty("var1")) //false
console.log("-----接下来看proto-----")
console.log(Func.hasOwnProperty("__proto__")) //false
console.log(func1.hasOwnProperty("__proto__")) //false
console.log(func1.__proto__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // false
console.log(func1.__proto__.var1) //Func进行了扩展
console.log(func1.var1) //Func进行了扩展
console.log("-----接下来看proto和prototype的区别-----")
func1.var1 = "func1进行了扩展"
console.log(func1.var1) //func1进行了扩展
console.log(Func.prototype.var1) //Func进行了扩展

扩展得到的东西到底从哪来的

那么子func1我们前面使用了hasOwnProperty属性，但是func1本身并没有这个属性，那么它从哪来的？

function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func进行了扩展"
console.log(func1.var1) //Func进行了扩展
console.log(Func.var1)
// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false
console.log("-----接下来看hasOwnProperty函数-----")
func1.var2 = "func1自己的变量"
console.log(func1.hasOwnProperty("var2")) //true
console.log(func1.hasOwnProperty("var1")) //false
console.log("-----接下来看proto-----")
console.log(Func.hasOwnProperty("__proto__")) //false
console.log(func1.hasOwnProperty("__proto__")) //false
console.log(func1.__proto__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // false
console.log(func1.__proto__.var1) //Func进行了扩展
console.log(func1.var1) //Func进行了扩展
console.log("-----接下来看proto和prototype的区别-----")
func1.var1 = "func1进行了扩展"
console.log(func1.var1) //func1进行了扩展
console.log(Func.prototype.var1) //Func进行了扩展
console.log("-----接下来看hasOwnProperty从哪来的-----")
console.log(Func.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true
console.log(Func.__proto__.hasOwnProperty("hasOwnProperty")) // false
console.log(func1.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true

从父和子那节的那张图也可以看出，使用两次__proto__即可找到hasOwnProperty属性

那么到此也就了解了prototype和__proto__了

附上完整代码两段供测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Fun(){

        }
        var func1 = new Fun()
        console.log(typeof Fun) // function
        console.log(typeof func1) // object
        console.log(func1.prototype) // undefined
        console.log(typeof func1.__proto__) // object
        console.log(func1.__proto__) // 一个比较复杂的object
        console.log(func1.__proto__ == Fun.prototype) // true
        console.log(func1.prototype == Fun.prototype) // false
        Fun.prototype.var1 = "hello"
        console.log(func1.var1) // hello
        console.log(func1.__proto__.var1) // hello
        func1.var1 = "yes"
        console.log(Fun.var1) // undefined
        console.log(func1.var1) // yes
        console.log(Fun.prototype.var1) // hello
        console.log(func1.__proto__.var1) // hello
        console.log(func1.prototype) // undefined
        func1.__proto__.var1 = "hhh"
        console.log(func1.__proto__.var1) // hhh
        console.log(Fun.prototype.var1) // hhh
        console.log(Fun.__proto__.var1) // undefined
        console.log("------测试原型对象里面的proto-------")
        console.log(func1.hasOwnProperty("var1")) // true
        console.log(func1.hasOwnProperty("__proto__"))
        console.log(Fun.hasOwnProperty("hasOwnProperty")) // false
        console.log(Fun.hasOwnProperty("__proto__")) // false
        console.log(Fun.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true
        console.log(Fun.__proto__.hasOwnProperty("hasOwnProperty")) // false
        console.log(func1.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		function Func() { };
		var func1 = new Func;
		console.log(func1.var1) //undefined
		Func.prototype.var1 = "Func进行了扩展"
		console.log(func1.var1) //Func进行了扩展
		console.log(Func.var1)
		// func1.prototype.var1 = "func1进行了扩展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
		console.log("var1" in func1) //true
		console.log("prototype" in func1) //false
		console.log("-----接下来看hasOwnProperty函数-----")
		func1.var2 = "func1自己的变量"
		console.log(func1.hasOwnProperty("var2")) //true
		console.log(func1.hasOwnProperty("var1")) //false
		console.log("-----接下来看proto-----")
		console.log(Func.hasOwnProperty("__proto__")) //false
		console.log(func1.hasOwnProperty("__proto__")) //false
		console.log(func1.__proto__ === Func.prototype) // true
		console.log(func1.__proto__ == Func.prototype) // true
		console.log(func1.prototype == Func.prototype) // false
		console.log(func1.__proto__.var1) //Func进行了扩展
		console.log(func1.var1) //Func进行了扩展
		console.log("-----接下来看proto和prototype的区别-----")
		func1.var1 = "func1进行了扩展"
		console.log(func1.var1) //func1进行了扩展
		console.log(Func.prototype.var1) //Func进行了扩展
		console.log("-----接下来看hasOwnProperty从哪来的-----")
		console.log(Func.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true
		console.log(Func.__proto__.hasOwnProperty("hasOwnProperty")) // false
		console.log(func1.__proto__.__proto__.hasOwnProperty("hasOwnProperty")) // true
	</script>
</body>
</html>

以上就是一文详解JavaScript中prototype的使用的详细内容，更多关于JavaScript prototype的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文详解JavaScript中prototype的使用

本文链接: https://www.lsjlt.com/news/148461.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

一文详解JavaScript中prototype的使用

目录prototype初步认识函数有prototype属性，函数创建的对象没有获得当前对象的属性父和子的扩展子的proto和prototype的区别扩展得到的东西到底从哪来的prot...

99+

2022-11-13
一文详解JavaScript中的Mixin

目录什么是 Mixin显示混入隐式混入总结类的出现最终使 JavaScript 非常容易使用继承语法,JavaScript 类比大多数人意识到的更强大,它是构建真正的 mixins ...

99+

2023-05-18

JavaScript 中的 Mixin JavaScript Mixin介绍 JavaScript Mixin
一文详解JavaScript中的闭包

JavaScript 闭包是一种重要的概念，在 JavaScript 编程中被广泛使用。尽管它可能会让初学者感到困惑，但它是理解 JavaScript 语言核心的关键概念之一。本文将深入探讨 JavaScript 闭包，让你了解它是如何工作...

99+

2023-05-14

闭包前端 JavaScript
一文详解JavaScript中的'BigInt'用法

目录前言BigInt的用法BigInt的区别与字符串的不同之处与ArrayBuffer的不同之处注意总结前言 JavaScript是一种广泛使用的编程语言，它可以增强Web应用程序的...

99+

2023-05-16

JavaScript BigInt用法 JavaScript BigInt
一文详解JavaScript中this指向的问题

目录1. 默认绑定2. 隐式绑定3. 显示绑定4. new 绑定5. 箭头函数的this6. 优先级7. 总结前提：文章讨论的都是非严格模式下this指向 1. 默认绑定例子1 ...

99+

2023-05-14

JavaScript this指向 JavaScript this
一文详解Java中Stream流的使用

目录简介操作1：创建流操作2：中间操作筛选（过滤）、去重映射排序消费操作3：终止操作匹配、最值、个数收集规约简介说明本文用实例介绍stream的使用。 JDK8新增了Stream...

99+

2022-11-13
一文了解JavaScript中call/apply/bind的使用

目录前言1. call1.1 语法1.2 流程图1.3 代码实现2. apply2.1 语法2.2 流程图2.3 代码实现3. bind3.1 语法3.2 流程图3.3 代码实现4....

99+

2022-11-13
一文详解JavaScript闭包典型应用

目录1.应用1.1 模拟私有变量1.2 柯里化1.3 偏函数1.4 防抖1.5 节流2.性能问题2.1 内存泄漏2.2 常见的内存泄漏3.闭包与循环体3.1 这段代码输出啥3.2 改...

99+

2022-11-13
一文详解C++中运算符的使用

目录一、算术运算符二、关系运算符三、逻辑运算符四、位运算符五、赋值运算符六、杂项运算符一、算术运算符运算符描述+把两个操作数相加-从第一个操作数中减去第二个操作数*把两个操作数相乘...

99+

2022-11-13
一文详解vue3中使用JSX的方法

在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚...

99+

2022-11-25

JSX Vue vue3
一文详解Lombok中@ToString()的使用技巧

目录Lombok 的使用Lombok的配置父类 toString() 的调用省略字段名称使用字段代替 Getter字段的包含和排除输出排序方法输出修改字段名称打印数组有一些注意点在平...

99+

2023-02-03

Lombok @ToString()使用技巧 Lombok @ToString()使用 Lombok @ToString()
一文详解Python中哈希表的使用

目录1. 前言2. 哈希表2.1 哈希函数2.2 哈希算法2.3 常见哈希算法2.4 哈希冲突3.总结1. 前言哈希表或称为散列表，是一种常见的、使用频率非常高的数据存储方案。哈...

99+

2022-11-11
一文详解Golang中consul的基本使用

目录consulconsul的安装和部署docker安装consul镜像的启动启动一个tcp_health_check的服务注册http版服务发现consul consul是一个开源...

99+

2023-03-06

Golang consul使用 Golang consul Go consul
一文详解Vue中过滤器filters的使用

目录一、局部过滤器二、全局过滤器三、过滤器串联四、过滤器接收多个参数 Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不...

99+

2023-05-17

Vue过滤器filters使用 Vue过滤器filters Vue过滤器
一文详解websocket在vue2中的封装使用

目录websocket在vue2中的封装使用实现思路：步骤页面中使用方式在vue中的封装websocket在vue2中的封装使用先说需求：页面中有websocket连接，进入的...

99+

2023-03-08

vue2封装websocket vue2 websocket
一文详解在Android中Service和AIDL的使用

目录Service 和 AIDL 的使用1. Service1.1 Service 的基本生命周期1.1.1 startService1.1.2 bindService1.2 Ser...

99+

2023-05-18

Android Service和AIDL的使用 Android Service使用 Android AIDL使用
一文详解Oracle中RAC的用法

目录1. oracle RAC介绍1.1 基本概念1.2 Oracle RAC应用场景1.3 Oracle RAC的优缺点2. Oracle RAC架构3. Oracle RAC 的安装1. Oracle RAC介绍 1...

99+

2023-06-16

Oracle RAC用法 Oracle RAC
一文详解nodejs的path模块使用

目录前言APIbasename （获取路径基础名）dirname （获取路径目录名）extname （获取路径扩展名）parse （解析路径）format （序列化路径）isAbso...

99+

2022-11-16

nodejs path模块使用 nodejs path
一文详解Redux Hooks的使用细节

在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了useSelector的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;...

99+

2022-11-22

Hooks Redux React
一文详解Spring security框架的使用

目录简介实例简介 Spring Security是一个基于Spring框架的安全认证和授权框架，它提供了一套全面的安全解决方案，可以在Web应用、移动应用和Web服务等不同场景下使用...

99+

2023-03-23

Spring security框架使用 Spring security框架 Spring security