扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript的原型是什么你知道吗
  • 746

0
分享到

JavaScript的原型是什么你知道吗

2024-04-02 19:04:59 746人浏览 安东尼
摘要

目录先看三个对象一、构造函数（对象）： 二、实例对象三、原型对象：再看三个属性：一、prototype:二、__proto__三、constructor属性原型链总结：先看

先看三个对象

一、构造函数（对象）：

JS中声明函数的三种方式

1.function 函数名(){}声明

2.匿名函数声明 var foo = function () {}

3.构造函数声明 var foo = new Function("形参1","形参2","形参3")。任何函数都可以用

new Function 来创建

        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}岁`);
        }
        fn1('小航',19)
        // 定义函数的第二种方式
        const fn2 = function(name,sex) {
            console.log(`我叫${name},性别${sex}`);
        }
        fn2('小航','男')
        fn3('小航','男')
        // Function也是一个构造函数
        // 上面的方式和下面的fn4声明函数的方式是一致的
        const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')
        // 当然还有箭头函数 只是写法变了 和第一种类似
        const fn3 = (name, sex) => {
            console.log(`我叫${name},性别${sex}`);
        }

当我们用函数去创建对象时，如下Fun就是构造函数。fn()是实例对象

        function Fun() {
        }
        var fn = new Fun()
        console.log(fn.__proto__ === Fun.prototype); // true

并且知道：

1. 任何函数，上面的fn fn1 fn2 fn2都是Fun的实例，而Fun也是构造函数Function的实例，Function是js内置的对象。

2. 看到上面一段代码，Fun.prototype指代/指向的是原型(对象，后面直接称为原型)。

 我们接下来看第二个对象：

 二、实例对象

        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}岁`);
        }
        const obj1 = {
            name: '小航',
            age: '19'
        }

知道以下知识点：

1. 只要用new关键字 + 构造函数生成的对象，就是实例对象

2. 即便没有用new + 关键字，而是用比如字面量创建对象，或者是函数直接 function 函数名() {} 这样声明，生成的也是实例对象,如上面代码 。

3. 记住重要的知识点：所有的实例对象都有__proto__属性，甚至可以去掉实例，改为所有的对象都有__proto__属性。      

4. 知道如下代码中,fn 是构造函数Fun的实例对象，并且Fun也是构造函数Function的实例对象。

        function Fun() {
        }
        var fn = new Fun()

得出的结论是：

1. fn实例对象的__proto__属性指向构造函数Fun的属性prototype【原型】

2. 而Fun的实例对象的__proto__属性也指向构造函数的Function的prototype【原型】              备注：在这里，prototype既是Fun的属性，而Fun.prototype也是最终的一个地方，目的地，这个目的地叫作原型对象。

        // 1. fn是Fun()构造函数的实例 实例对象的__proto__属性都会指向自身构造函数的prototype属性
        function Fun() {
        }
        var fn = new Fun()
        console.log(fn.__proto__ === Fun.prototype); // true
        // 2. Fun函数是Function构造函数的实例 因此Fun的__proto__和构造函数Function指向同一个地方
        console.log(Fun.__proto__ === Function.prototype); // true

第一个console对应下图的序号1，第二个console对应下图的序号4

三、 原型对象：

知道知识点：

1. 所有的函数都有一个原型对象。比如函数Function，它有原型对象Function.prototype。也有说法叫Function.prototype 为 函数Function的伴生对象，意思是函数Function一创建，就有一个陪伴它一起创建的对象叫Function.prototype。而Function自己的身上，又有一个属性叫作prototype，这个属性指向了它的伴生对象。

2. 函数的原型对象身上有一个属性，叫作，constructor，它能够指回构造函数。就好像，构造函数Function通过属性prototype指向了原型对象Function.prototype，而原型对象Function.prototype通过自身的constructor属性指回去。

 比如下面的，可以自行验证。

        function fn() {
        }
        console.log(fn.prototype);
        console.log(fn.prototype.constructor === fn); // true

3. 函数的原型对象身上还有一个属性，叫作__proto__属性。浏览器打印出来现在长这样，

[[Prototype]]: Object

原型当中的__proto__指向父类的原型对象prototype，比如下面的代码

下面的意思是函数Person的prototype，这是一个原型对象，它的__proto__属性指向Object父类的prototype，Function也是类似。为什么是这样？

因为既然Person.prototype和Function.prototype都叫作原型对象，都是对象，那么本质都是通过new Object创建的，都是构造函数Object的实例，因此它们也是实例对象，身上也有__proto__属性指向Object父类。

    function Person() {
    }
    console.log(Person.prototype.__proto__ === Object.prototype); // true
    console.log(Function.prototype.__proto__ === Object.prototype); // true

对应下图的序号3

记住：

Object是各个对象的根

再看三个属性：

一、prototype:

1. 记住这个属性是函数独有的

下面的代码，fn有prototype，Fun构造函数有prototype，Function下面没写出来，但是也有prototype。

看代码

        var fn55 = new Function('age', 'sex', 'console.log(`今年${age}性别${sex}`)')
        console.log(fn55.prototype);
        console.log(fn55.__proto__ === Function.prototype); // true

注意：

1. 上面的fn55是通过new Function创建的一个函数，

2. 函数有prototype 

3. 同时fn55也是通过new + Function 创建的一个实例对象， 因此也有__proto__，指向Function构造函数的prototype

看下面代码

        function Fun(name, age) {
            this.name = name;
            this.age = age
        }   
        var fnn = new Fun('小航', '123')
        console.log(fnn.prototype); // undefined

注意上面代码：

1. 上面是通过new + Fun 创建了一个实例对象

2. 这里是通过构造函数Fun创建了一个对象fnn，而fnn并不是函数，因此并没有prototype原型对象

二、__proto__

1. 记得万物都是对象 因此万物都有__proto__

2. 构造函数的创建的实例对象，有__proto__，指向构造函数的prototype

        function Person(name,age) {
            this.name = name
            this.age= age
        }
        Person.prototype.sayHello = function() {
            console.log(this.name);
        }
        const obj1 = {
            name: '小航',
            age: '19'
        }
        const obj2 = new Object()
        obj2.name = '焦迈奇'
        obj2.age = '19'
        console.log(obj1);
        console.log(obj2);
        console.log(Person.prototype);
        const person1 = new Person('小红', 19)
        const person2 = new Person('小明', 20)
        console.log(person1.__proto__);
        console.log(person2.__proto__);
        console.log(Person.prototype === person1.__proto__);// true
        console.log(Person.prototype === person2.__proto__);// true
        console.log(Object.prototype === obj1.__proto__);   // true
        console.log(Object.prototype === obj2.__proto__);        // true

3. 函数实例有__proto__，也指向构造函数Function

        // 2. 创建函数的几种方式
        // 定义函数的第一种方式
        function fn1(name,age) {
            console.log(`我叫${name},我今年${age}岁`);
        }
        fn1('小航',19)
        // 定义函数的第二种方式
        const fn2 = function(name,sex) {
            console.log(`我叫${name},性别${sex}`);
        }
        fn2('小航','男')
        // 或者箭头函数
        const fn3 = (name, sex) => {
            console.log(`我叫${name},性别${sex}`);
        }
        fn3('小航','男')
        // 这三个函数的__proto__等于构造函数Function的prototype
        // Function也是一个构造函数
        // 上面的三种方式本质和下面的fn4声明函数的方式是一致的
        // 定义函数的第三种方式
        const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')
        // console.log(Function.prototype === fn1.__proto__); // true
        // console.log(Function.prototype === fn2.__proto__); // true
        // console.log(Function.prototype === fn3.__proto__); // true
        // console.log(Function.prototype === fn4.__proto__); // true

4. function Object和 function Function 都是构造函数Function的实例，因此也有__proto__

        console.log(Object.__proto__ === Function.prototype); 
        // true
        console.log(Function.__proto__ === Function.prototype);
        // true

5. 原型对象也是对象，因此也有__proto__

        function Person() {
        }
        console.log(Person.prototype.__proto__ === Object.prototype); // true
        console.log(Function.prototype.__proto__ === Object.prototype); // true

三、constructor属性

每一个原型对象身上，才有constructor属性

        function fn() {
        }
        console.log(fn.prototype);
        console.log(fn.prototype.constructor === fn); // true
        console.log(Function.prototype.constructor === Function); // true
        console.log(Object.prototype.constructor === Object);

一些更加复杂的情况

console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__=== null); // null

1. obj.__proto__指向Object.prototype

2. Object.prototype.constructor就是指向Object本身

备注：Object也是构造函数也是Function的实例对象 因此下面Object也有__proto__

3. Object.__proto__指向Function.prototype

4. Function.prototype.__proto__指向什么？这个就是[原型对象也是对象]原型对象的__proto__指向什么？指向的是父类的prototype也就是Object.prototype

5. Object.prototype指向什么，就是原型链的终点null 可以下去自行验证

原型链

原型链就是__proto__的终点

总结：

借助下面这张图，帮你再总结一下知识点

1. 什么是原型链？就是实例对象身上__proto__属性的走向，最终指向了Object.prototype.__proto__，是null值，就是原型链的终点

2. 明确三个对象，函数，实例对象，原型对象。三个属性，prototype __proto__ constructor

  • 只有函数有prototype属性, 如果是对象但是不是函数，就没有prototype
  • 每个实例对象都有__proto__属性，指向其构造函数的prototype，对应上图序号1
  • 原型对象，可以理解为一个伴生对象，函数产生，它也一起产生，就是Fun.prototype, 他也有__proto__属性，指向父节点的prototype，就是Object.prototype,而构造函数也是一个实例对象，因此__proto__属性也有，也指向Object.prototype。
  • 此外，function Object 和 function Function 也是 构造函数Function的实例对象，因此function Object 和 function Function 也有__proto__属性，也指向Function的prototype，这个可以自行验证

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!    

--结束END--

本文标题: JavaScript的原型是什么你知道吗

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

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

猜你喜欢
  • JavaScript的原型是什么你知道吗
    目录先看三个对象一、构造函数（对象）： 二、实例对象三、原型对象：再看三个属性：一、prototype:二、__proto__三、constructor属性原型链总结：先看...
    99+
    2024-04-02
  • 你真的知道什么是arguments吗
    是的，arguments 是一个特殊的 JavaScript 对象，它包含了函数被调用时传递给函数的所有参数。它类似于一个数组，可以...
    99+
    2023-09-21
    arguments
  • Java的springcloud Sentinel是什么你知道吗
    目录Sentinel 是什么？概述Sentinel 的历史：历史Sentinel 分为两个部分:两部分基本概念及作用基本概念：主要作用：Sleuth概述zipkin分布式监控客户端基...
    99+
    2024-04-02
  • 你知道 ASP 对象在 Linux 中的数据类型是什么吗？
    ASP（Active Server Pages）是一种动态网页技术，它可以让开发人员使用脚本语言（如VBScript、JScript等）来创建动态的网页内容。在Windows操作系统中，ASP对象的数据类型是非常重要的，但是在Linux系统...
    99+
    2023-08-26
    对象 linux 数据类型
  • 你知道吗？Java对象文件响应的工作原理是什么？
    Java是一种广泛使用的编程语言，它的对象文件响应机制是Java程序的重要组成部分。本文将深入探讨Java对象文件响应的工作原理，并提供演示代码，让读者对此有更深入的了解。 首先，让我们来了解一下Java中的对象文件。在Java中，对象文件...
    99+
    2023-09-10
    对象 文件 响应
  • JavaScript中的变量声明你知道吗
    目录变量（一）var1）关于var声明的变量的作用域2）var声明提升（hoist）（二）let1）与var不同，let声明的变量不会再作用域中被提升，这一现象被称为“暂...
    99+
    2024-04-02
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型？怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型？怎样去理解原型的...
    99+
    2024-04-02
  • JAVA语法糖原理你知道吗
    目录Java语法糖1.基本概念1.1语法糖1.2解语法糖2.常见糖块2.1 switch 支持 String 与枚举2.2泛型2.3自动装箱与拆箱2.4方法变长参数2.5枚举2.6条...
    99+
    2024-04-02
  • 数据类型是Python编程的基础，你知道吗？
    Python是一种高级编程语言，它被广泛应用于数据科学、机器学习、人工智能等领域。在Python编程中，数据类型是非常重要的基础知识。本文将介绍Python中常用的数据类型，包括数字、字符串、列表、元组、字典和集合，并通过演示代码详细讲解...
    99+
    2023-08-19
    数据类型 spring windows
  • JavaScript的这5个技巧你知道了吗
    JavaScript的这5个技巧你知道了吗，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。谁要是说 JavaScript 是世界上比较好的语言，...
    99+
    2024-04-02
  • 你真的知道PHP函数和JavaScript数据类型的区别吗？
    PHP和JavaScript是现代Web开发中最常用的两种编程语言。虽然它们都可以用于处理服务器端和客户端的逻辑，但是它们的一些核心概念和特性还是有所不同的。其中PHP函数和JavaScript数据类型是两个非常重要的概念，这篇文章将深入探...
    99+
    2023-11-14
    函数 javascript 数据类型
  • Java ThreadLocal有什么作用你知道吗
    目录ThreadLocal有什么作用测试代码当前线程只能操作当前ThreadLocal定义的局部变量，其他线程是访问不了。测试结果总结ThreadLocal有什么作用 ThreadL...
    99+
    2024-04-02
  • 你知道 Python 编程中最难的算法是什么吗？
    Python 是一种强大的编程语言，被广泛应用于各种领域。尽管 Python 的语法简单易懂，但是在实际编程中，我们经常会遇到各种各样的问题。其中，最令人头疼的问题之一就是算法。 在 Python 编程中，有许多算法都非常难以实现。但是，...
    99+
    2023-07-19
    编程算法 linux django
  • javascript的原型和原型链是什么
    小编给大家分享一下javascript的原型和原型链是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...
    99+
    2024-04-02
  • Javascript数组常用方法你都知道吗
    我用这些方法主要从五个方面去学习。 1.方法是干什么的。 2.谁能用 (当然是数组啦)。 3.有没有返回值，返回值是什么。 4.修不修改原来的对象。 5.如何使用。 接下来就是干货了...
    99+
    2024-04-02
  • JavaScript原型与原型链是什么
    这篇文章主要介绍“JavaScript原型与原型链是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript原型与原型链是什么”文章能帮助大家解决问题...
    99+
    2024-04-02
  • 你不知道的16条JavaScript调试技巧分别是什么
    你不知道的16条JavaScript调试技巧分别是什么，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。JavaScript调试是业内公认的难...
    99+
    2024-04-02
  • Python 对象响应框架：你真的知道它是什么吗？
    Python 是一种动态语言，允许开发人员在运行时动态地添加属性和方法。这种特性使得 Python 成为一种非常灵活的语言，但也带来了一些挑战。例如，当我们需要在运行时对对象的属性进行修改时，可能会遇到一些问题。这时，Python 对象响...
    99+
    2023-10-03
    对象 响应 框架
  • JavaScript中的原型是什么
    本篇内容主要讲解“JavaScript中的原型是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中的原型是什么”吧!JavaScript是...
    99+
    2024-04-02
  • 你可能不知道的几个JavaScript原生方法是怎样的
    这篇文章将为大家详细讲解有关你可能不知道的几个JavaScript原生方法是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。自ES6发行以来，许多新的，...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作