【JavaScript高级进阶】构造函数和原型,学会prototype

news2024/11/29 12:45:25

目录

前言

1.构造函数和原型

1.1使用prototype解决内存浪费的问题

1.2constructor构造函数构造器构造函数

2.原型链

2.1js中成员查找规则

2.2原型对象this指向

2.3扩展内置对象

3.call作用

4.继承

4.1利用原型对象继承

写在最后


前言

哈喽哈喽大家好,因为最近的事情多一点,所以停更了几天,时隔半个月,我山鱼又回来了,以后会持续更新的烟花🎉🎉🎉【本篇主要更新了es5的对象原型prototype和call的使用,以及原型对象内部的方法继承和指向回】

1.构造函数和原型

1.1使用prototype解决内存浪费的问题

缺点:存在内存浪费的问题,

 

如果有俩对象或者更多就会对一个复杂数据类型进行空间的多次开辟

构造函数原型prototype原型对象主要解决了内存浪费的问题构造函数通过原型分配的函数是所有对象所共享的。在JavaScript里每一个构造函数都有一个 prototype属性,指向另一个对象。这个prototype就是一个对象,prototype这个对象的所有属性和方法,都会被构造函数所拥有。这时候就可以使用prototype把方法放到里面供该对象所有的实例对象使用。

 

 

对象原型_ proto_ 对象

对象都会有一个属性_ proto_ 指向构造函数的 prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_ proto_ 原型的存在。

 sy的 _ proto_ 和sym的 _ proto_ 是一样的方法的查找规则:首先先看sy,sym对象身上是否有sing 方法,如果有就执行这个对象上的sing ,因为存在_ _ proto _ _,就去构造函数原型对象Prototype的存在,就去构造函数原型对象Prototype身上去查找sing这个方法(简单来说就是,我自己有就使用,没有就去原型对象里找)函数 和 对象创建时 会自动创建一个属性 他两指向同一个空对象

 

1.2constructor构造函数构造器构造函数

对象原型(_ proto _) 和构造函数( prototype )原型对象里面都有一个属性constructor属性, constructor我们称为构造函数,因为它指回构造函数本身

 

他们俩里面都有constructor如果prototype里面以对象的形式添加,那么就是prototype指向变了,指向了一个新的原型对象,这个新对象里没有指向construor,需要自己手动指向一下

2.原型链

2.1js中成员查找规则

当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。 如果没有就查找它的原型(也就是._ proto _指向的prototype原型对象)。 如果还没有就查找原型对象的原型( Object的原型对象)。 依此类推一直找到Object为止( null )。

2.2原型对象this指向

1.在构造函数中,里面this指向的是对象实例shanyu

<script>
        function Person(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        // 声明一个变量然后验证this指向是不是和实例化对象相同
        var that;
        Person.prototype.skill = function () {
            console.log('我会吃饭');
            that = this;
        }
        var shanyu = new Person('山鱼', 30);
        shanyu.skill();
        console.log(that === shanyu);
    </script>

2.3扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法.

 <script>
        //  自定义对象应用,给Array添加一个自定义方法
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3, 4];
        console.log(arr.sum());
    </script>

数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {} 如果进行该操作就会使本来有的方法被覆盖掉,只能是Array.prototype.方法名= function(){} 的方式。

3.call作用

调用这个函数,并且修改函数运行时的this指向,有三个参数分别是thisArg  当前调用函数this的指向对象arg1 , arg2 传递的其他参数

    <script>
        function sing(x,y) {
            console.log("a~a~给我已被忘情水");
            console.log(this);
            console.log(x+y);
        }
        var fn = {
            name: '山鱼'
        }
        // call()可以改变这个函数的this指向此时这个函数的this就指向了o这个对象
        sing.call(fn,1,2)
    </script>

4.继承

通过我们打的可以看到this的指向为Son,也就是Son使用了父构造函数里面的,uname,uage

4.1利用原型对象继承

es6之前并没有extends所以可以使用构造函数和模型对象结合的方式来进行继承操作

 <script>
        function Father(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        Father.prototype.eat = function () {
            console.log("我爱吃鸡腿");
        }
        // 子构造函数
        Son.prototype = new Father();
        Son.prototype.constructor = Son;
        function Son(uname, uage, swing) {
            Father.call(this, uname, uage);
            this.swing = swing;
        }
        Son.prototype.student = function () {
            console.log('我爱学习!!');
        }
        // 要向使用父亲原型对象里面的方法,可以实例化一下Father,然后
        // 这时候Son的this指向到了Father,所以我们要用constructor将this指回到Son
        var son = new Son('山鱼妹', 18, "游泳冠军!!!");
        // console.log(son.eat());
        console.log(son);
        console.log(Father.prototype);
    </script>

写在最后

yimg一只蛋,如果从外面被敲开,注定只能被吃掉。如果从里面啄开,说不定是只鹰!🦅yimg一只蛋,如果从外面被敲开,注定只能被吃掉。如果从里面啄开,说不定是只鹰!🦅

点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/3349.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Day1】零基础学java--》记事本运行java程序,通熟语言让你彻底明白为什么配置java环境变量

前言&#xff1a; 大家好&#xff0c;我是良辰丫&#xff0c;从今天开始我将协同大家一起从零基础学习Java&#xff0c;期待与君为伴&#xff0c;走向海的彼岸。&#x1f495;&#x1f495;&#x1f495; &#x1f9d1;个人主页&#xff1a;良辰针不戳 &#x1f4d6;所属专栏&a…

C语言之数组练习题

第1关&#xff1a;数组插入元素 300 任务要求参考答案评论106 任务描述相关知识 数组数组元素的表示方法编程要求测试说明任务描述 本关需要你将一个数插入到一组已经排好序的数组并输出。 相关知识 数组在程序设计中&#xff0c;为了处理方便&#xff0c; 把具有相同类型…

【C++】多态 — 多态的原理 (下篇)

文章目录&#x1f4d6; 前言1. 虚函数表1.1 虚函数表的引入&#xff1a;1.2 基类的虚表&#xff1a;1.3 派生类虚表&#xff1a;2. 多态的原理2.1 多态虚函数的调用和普通函数的调用&#xff1a;2.1 - 1 到底什么是多态&#xff08;重点&#xff09;2.1 - 2 父类的指针实现多态…

Allegro基本规则设置指导书之Analysis Modes

Allegro基本规则设置指导书之Analysis Modes 下面介绍基本规则设置指导书之Analysis Modes 点击set-up-constrains-Modes 调出Analysis Modes,这个是所有DRC的总开关 下面介绍常用的一些开关设置 Design Options (Soldermask) 从上往下 阻焊到阻焊的间距 阻焊到pad和走线…

EasyCVR及智能分析网关在校园视频融合及明厨亮灶项目中的应用方案设计

随着校园智能化需求的不断增长&#xff0c;越来越多的校园逐渐开始升级校园监控视频平台&#xff0c;将原先传统的视频监控系统&#xff0c;逐渐升级转变为灵活性强、视频能力丰富、具备AI检测能力、并能支持视频汇聚与统一管理的智能化校园综合管理平台。 在某学校的视频监控…

MapReduce概述

MapReduce概述 MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在一个Hadoop集群上。 MapReduce…

【优化算法】鹈鹕优化算法(POA)(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑…

ARMv7/ARMv8/ARMv9架构你不知道的那些事

快速链接: . &#x1f449;&#x1f449;&#x1f449; 个人博客笔记导读目录(全部) &#x1f448;&#x1f448;&#x1f448; 付费专栏-付费课程 【购买须知】: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 以下仅代表个人观点&…

七大排序算法——快速排序

AcWing算法专题——快速排序 文章目录AcWing算法专题——快速排序前言一、快速排序的核心二、算法图示三、算法代码四、算法详解1.递归停止的条件2.下标移动的实现3.下标初始值的设定4.边界情况分析4.1区间划分4.2 do while循环条件五、思考题总结前言 现在我们开始进入算法模块…

【第一章 虚拟机】

第一章 虚拟机 1. 虚拟机VM ①虚拟机就是一台虚拟的计算机&#xff0c;它是一款软件&#xff0c;用来执行一系列虚拟计算机指令。 ②虚拟机分为系统虚拟机和程序虚拟机。系统虚拟机&#xff08;比如VMware&#xff09;,它们完全是对物理计算机的仿真&#xff0c;提供了一个可运…

瑞芯微rk3568移植openbmc(三)

2022.11.04 更新 1、关于h264 novnc openbmc中使用的ipkvm其server端调用的是libvncserver库&#xff0c;而其web client端调用的则是novnc的库&#xff0c;既上篇研究修改了libvncserver后&#xff0c;再次继续研究了一下novnc。 Github搜索一圈以后&#xff0c;发现https://…

Java设计模式之单例模式详细讲解

设计模式与单例模式 1、什么是单例模式 ​ 单例模式是指保证某个类在整个软件系统中只有一个对象实例&#xff0c;并且该类仅提供一个返回其对象实例的方法&#xff08;通常为静态方法&#xff09; 2、单例模式的种类 ​ 经典的单例模式实现方式一般有五种 2.1 饿汉式 //…

【SpringBoot】SpringBoot整合SpringSecurity+thymeleaf实现认证授权(配置对象版)

一.概述 1.框架概述 Spring Security 是 Spring 家族中的一个安全管理框架&#xff0c;Spring Security 的两大核心功能就是认证&#xff08;authentication&#xff09;和授权&#xff08;authorization&#xff09;。 认证 &#xff1a;你是什么人。授权 &#xff1a;你能…

RHCE学习 --- 第一次作业

RHCE学习 — 第一次作业 首先我们先设置网卡开机自动启动 vi /etc/sysconfig/network-scripts/ifcfg-ens160 最下面修改ONBOOTyes 然后安装好chrony&#xff0c;配置/etc/chrony.conf文件&#xff0c;添加题目要求的时间服务器 然后设置一个例行性工作&#xff0c;每天早上九…

美国FBA海运专线究竟是什么?美国fba海运专线都有那些?

美国FBA海运专线究竟是什么?美国FBA特别航运线&#xff0c;顾名思义就是海运发送的特别货运线&#xff0c;那么它的收费标准是什么呢?一、美国FBA海运专线究竟是什么 美国FBA特别航运线&#xff0c;顾名思义就是海运发送的特别货运线&#xff0c;那么它的收费标准是什么呢? …

猿创征文|『编程与创作』10款颜值颇高的宝藏工具

&#x1f31f;个人主页&#xff1a;Mymel_晗&#xff0c;一名喜欢鼓捣 Java 的在校学生。 &#x1f31f;撸代码本来是一件枯燥的事情&#xff0c;而一款高颜值工具加持可能会让你事半功倍&#xff0c;今天就给大家推荐一下我在大学学习中发现的几款颜值工具~ 从写代码&#xff…

录音m4a怎么转换成mp3

有小伙伴问手机录音文件电脑上播放不了怎么办&#xff1f;这是很多小伙伴在用手机录完音后遇到最多的问题&#xff0c;尤其是那些第一次遇到这个问题的人&#xff0c;根本不知道这是什么原因导致的&#xff0c;还总以为自己的录音文件出了问题&#xff0c;回去检查发现手机上还…

03-Nginx性能调优与零拷贝

目录 Nginx 性能调优 零拷贝&#xff08;Zero Copy&#xff09; 零拷贝基础 A、 实现细节 B、 总结 零拷贝方式 A、 实现细节 B、 总结 A、 实现细节 B、 总结 A、 实现细节 B、 总结 Nginx 性能调优 在 Nginx 性能调优中&#xff0c;有两个非常重要的理论点&#xff08;面试点…

【C++红黑树】带图详细解答红黑树的插入,测试自己的红黑树是否正确的代码

目录 1.红黑树的概念 1.1红黑树的特性&#xff08;41&#xff09; 2.红黑树的框架 3.红黑树的插入 3.1parent在grandfather的左边 3.1parent在grandfather的右边 4.测试自己的红黑树是不是平衡的 1.红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个…

米联客FDMA3.1数据缓存方案全网最细讲解,自创升级版,送3套视频和音频缓存工程源码

米联客的FDMA数据缓存方案发布也有五六年了&#xff0c;但真正能熟练使用的兄弟却很少&#xff0c;其实还是没有好的例程作为参考和同熟易懂的讲解&#xff0c;这里我做如下解析&#xff1a; FDMA部分&#xff1a;这部分是米联客封装了用户接口的AXI4-FULL协议代码&#xff0c;…