前端学习<四>JavaScript——54-原型链

常见概念

  • 构造函数

  • 构造函数-扩展

  • 原型规则和示例

  • 原型链

  • instanceof

构造函数

任何一个函数都可以被 new,new 了之后,就成了构造方法。

如下:

 function Foo(name, age) {
     this.name = name;
     this.age = age;
     //retrun this;   //默认有这一行。new一个构造函数,返回一个对象
 }
 ​
 var fn1 = new Foo('smyhvae', 26);
 var fn2 = new Foo('vae', 30); //new 多个实例对象

与普通函数相比,构造函数有以下明显特点:

  • 用 new 关键字调用。

  • 不需要用 return 显式返回值的,默认会返回 this,也就是新的实例对象。

  • 建议函数名的首字母大写,与普通函数区分开。

参考链接:

  • JavaScript 中的普通函数与构造函数

当 new 之后,this 会先变成一个空对象,然后通过this.name = name来赋值。

构造函数的扩展

上图中发现,数组、对象、函数也有构造函数,它们的构造函数是 Array、Object、function。实际开发中,都推荐前面的书写方式。

原型规则

原型规则是学习原型链的基础。原型规则有五条,下面来讲解。

规则 1

所有的引用类型(数组、对象、函数),都具有对象特性,都可以自由扩展属性。null 除外。

举例:

规则 2

所有的引用类型(数组、对象、函数),都有一个_proto_属性,属性值是一个普通的对象_proto_的含义是隐式原型。

其实,规则 2 是规则 1 的特例,只不过,js 语法帮我们自动加了 规则 2。

规则三

所有的函数(不包括数组、对象),都有一个prototype属性,属性值是一个普通的对象prototype的含义是显式原型。(实例没有这个属性)

规则四

所有的引用类型(数组、对象、函数),_proto_属性指向它的构造函数prototype值。

总结:以上四条,要先理解清楚,然后再来看下面的第五条。

规则五

当试图获取一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_中寻找(即它的构造函数的prototype)。

举例代码1

 //创建方法
 function Foo(name) {
     this.name = name;
 }
 ​
 Foo.prototype.alertName = function () {
     // 既然 Foo.prototype 是普通的对象,那也允许给它添加额外的属性 alertName
     console.log(this.name);
 };
 ​
 var fn = new Foo('smyhvae');
 fn.printName = function () {
     console.log(this.name);
 };
 ​
 // 测试
 fn.printName(); //输出结果:smyhvae
 fn.alertName(); //输出结果:smyhvae

上方代码中,虽然 alertName 不是 fn 自身的属性,但是会从它的构造函数的prototype里面找。

扩展:遍历循环对象自身的属性

我们知道,for in循环可以遍历对象。针对上面的那个 fn 对象,它自身有两个属性:nameprintName,另外从原型中找到了第三个属性alertName。现在,如果我们对 fn 进行遍历,能遍历到两个属性还是三个属性呢?

答案:两个。因为,高级浏览器中已经在 for in循环中屏蔽了来自原型的属性。但是,为了保证代码的健壮性,我们最好自己加上判断,手动将第三个属性屏蔽掉:

 for (var item in fn) {
     if (fn.hasOwnProperty(item)) {
         console.log(item);
     }
 }

原型链

还是拿上面的举例代码1举例,如果此时在最后面加一行代码:

     fn.toString();   //去 fn._proto_._proto_ 中查找 toString()方法

上面的代码中,fn 直接调用了 toString()方法,这是因为它通过原型链,去_proto__proto_里找到了Object,而Object是由toString()方法的。

instanceof

格式:

 对象 instanceof 构造函数;

instanceof的作用:用于判断引用类型属于哪个构造函数

例 1:判断一个变量是否为数组: 变量 instanceof Array

例 2:

 function Person() {}
 ​
 //p--->Person.prototype--->Object.prototype--->null
 var p = new Person();
 //构造函数的**原型**是否在 p 对象的原型链上!
 console.log(p instanceof Person);

例 3:

 fn instanceof Foo;

上面这句话,判断逻辑是:fn 的_proto_一层一层往上找,看能否对应到 Foo.prototype

原型链如下:(重要)

注意,Object 这个构造方法的显式原型是 null,这是一个特例。

issues 101 补充:通过原型链查找时,如果你找的是一个属性的话,则返回 undefined,如果你找的是一个方法,则报错。

常见题目

  • 如何准确判断一个变量是数组类型

  • 写一个原型链继承的例子

  • 描述 new 一个对象的过程

  • zepto(或其他框架)源码中如何使用原型链

下面分别讲解。

题目一:如何准确判断一个变量是数组类型

答案:

 var arr1 = [];
 ​
 console.log(arr1 instanceof Array); //打印结果:true。
 console.log(typeof arr1); //打印结果:object。提示:typeof 方法无法判断是否为数组

上方代码表明,只能通过 instanceof 来判断是否为数组。而 typeof 的打印结果是 object。

题目二:写一个原型链继承的例子

来看个基础的代码:

上面这个例子是基础,但是,在回答面试官的问题时,不要写上面的例子。要写成下面这个例子:(更贴近实战)

function DomElement(id) {
    this.dom = document.getElementById(id);
}
DomElement.prototype.html = function (val) {
    var ele = this.dom;
    if (val) {
        ele.innerHTML = val;
        return this;
    } else {
        return ele.innerHTML;
    }
};
DomElement.prototype.on = function (type, fn) {
    var ele = this.dom;
    ele.addEventListener(type, fn);
    return this;
};
var div1 = new DomElement('div1');
div1.html('<p>这是一段文字</p >');
div1.on('click', function () {
    console.log('clicked');
});

题目三:描述 new 一个对象的过程

(1)创建一个新对象

(2)this 指向这个新对象

(3)执行代码(对 this 赋值)

(4)返回 this

参考链接:

  • 原型、原型链、继承模式

写在最后:希望大家可以点个关注点个赞,这对up真的很重要!谢谢! 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据聚类:Mean-Shift和EM算法

目录 1. 高斯混合分布2. Mean-Shift算法3. EM算法4. 数据聚类5. 源码地址 1. 高斯混合分布 在高斯混合分布中&#xff0c;我们假设数据是由多个高斯分布组合而成的。每个高斯分布被称为一个“成分”&#xff08;component&#xff09;&#xff0c;这些成分通过加权和的方式来构…

ElasticSearch教程入门到精通——第二部分(基于ELK技术栈elasticsearch 7.x+8.x新特性)

ElasticSearch教程入门到精通——第二部分&#xff08;基于ELK技术栈elasticsearch 7.x8.x新特性&#xff09; 1. JavaAPI-环境准备1.1 新建Maven工程——添加依赖1.2 HelloElasticsearch 2. 索引2.1 索引——创建2.2 索引——查询2.3 索引——删除 3. 文档3.1 文档——重构3.2…

GPU:使用gpu-burn压测GPU

简介&#xff1a;在测试GPU的性能问题时&#xff0c;通常需要考虑电力和散热问题。使用压力测试工具&#xff0c;可以测试GPU满载时的状态参数&#xff08;如温度等&#xff09;。gpu_burn是一个有效的压力测试工具。通过以下步骤可以进行测试。 官网&#xff1a; http://www…

Linux——终端

一、终端 1、终端是什么 终端最初是指终端设备&#xff08;Terminal&#xff09;&#xff0c;它是一种用户与计算机系统进行交互的硬件设备。在早期的计算机系统中&#xff0c;终端通常是一台带有键盘和显示器的电脑&#xff0c;用户通过它输入命令&#xff0c;计算机在执行命…

PMBOK® 第六版 项目是什么

目录 读后感—PMBOK第六版 目录 项目定义 定义&#xff1a;项目是为创造独特的产品、服务或成果而进行的临时性工作。 项目的特征具备以下三点&#xff1a; 独特性&#xff1a;独一无二&#xff0c;无法简单重复过去的做法。 临时性&#xff1a;项目有明确的起点和终点&…

(22408)武汉大学计算机专硕初试备考经验贴

首先谈一下&#xff0c;写这篇文章的初衷。 我相信考武大计算机的同学都是优秀的&#xff0c;应该有自己的备考方法&#xff0c;所以这里并不介绍具体怎么备考某一科目。 计算机考研热度较高&#xff0c;备考不易&#xff0c;这里将自己备考过程中遇到的问题&#xff0c;分享…

人工智能|推荐系统——推荐大模型最新进展

近年来,大语言模型的兴起为推荐系统的发展带来了新的机遇。这些模型以其强大的自然语言处理能力和丰富的知识表示,为理解和生成复杂的用户-物品交互提供了新的视角。本篇文章介绍了当前利用大型语言模型进行推荐系统研究的几个关键方向,包括嵌入空间的解释性、个性化推荐的知…

中国人工智能奠基人张钹院士:走进“无人区” 探索人工智能之路

4月23日&#xff0c;中国人工智能奠基人、清华大学计算机系教授、中国科学院院士张钹在“人文清华”讲坛作专题分享。在2小时的直播中&#xff0c;张钹以《走进“无人区” 探索人工智能之路》为主题&#xff0c;回顾人工智能的发展历程&#xff0c;为大家解读ChatGPT的意义&…

新手Pytorch入门笔记-概念入门

文章目录 1.主干权重和模型权重2.超参数2.1 ReLU(inplaceTrue)2.2 交叉熵损失CrossEntropyLoss 3.反向传播4.优化器4.1 optimizer.zero_grad()5.卷积6.Batch Normalization7.U-Net结构 这章节比较枯燥&#xff0c;都是大段文字 1.主干权重和模型权重 主干权重&#xff08;Back…

GateWay具体的使用之全链路跟踪TraceId日志

1.创建全局过滤器&#xff0c;在请求头上带入traceId参数&#xff0c;穿透到下游服务. package com.by.filter;import cn.hutool.core.collection.CollUtil; import cn.hutool.core.util.IdUtil; import cn.hutool.core.util.ObjectUtil; import cn.hutool.jwt.JWTValidator;…

vue做导入导出excel文档

系统中经常会遇到要实现批量导入/导出数据的功能&#xff0c;导入就需要先下载一个模板&#xff0c;然后在模板文件中填写内容&#xff0c;最后导入模板&#xff0c;导出就可能是下载一个excel文件。 1、导出 新建一个export.js文件如下&#xff1a; import {MessageBox,Mes…

【Git】分支管理的基本操作

文章目录 理解分支分支的本质主分支创建分支切换分支合并分支fast-forward模式删除分支合并冲突问题 理解分支 分支管理是git的一个核心功能。在git中&#xff0c;分支是用来独立开发于某个功能或者修复某个bug的一种方式。就像是《火影忍者》中的鸣人使用分身去妙蛙山修炼&am…

ansible-copy用法

目录 概述实践不带目录拷贝带目录拷贝 概述 ansible copy 常用用法举例 不带目录拷贝&#xff0c;拷贝的地址要写全 带目录拷贝&#xff0c;拷贝路径不要写在 dest 路径中 实践 不带目录拷贝 # with_fileglob 是 Ansible 中的一个循环关键字&#xff0c;用于处理文件通配符匹…

【强训笔记】day4

NO.1 思路&#xff1a;利用滚动数组&#xff0c;迭代一个Fibonacci数列&#xff0c;给出三个值进行循环迭代&#xff0c;当n<c时&#xff0c;说明n在b和c之间&#xff0c;这里只需要返回c-n和n-b的最小值就可以了。 代码实现&#xff1a; #include<iostream>using n…

BLIP-2论文精读

概述 由于大规模模型的端到端训练&#xff0c;视觉和语言预训练的成本越来越高&#xff0c;BLIP-2是一种通用且高效的预训练策略&#xff0c;可以从现成的冻结的预训练图像编码器和冻结的大型语言模型引导视觉语言预训练。 模型主体框架 BLIP-2采用了一个轻量级的查询转换器Q…

【Docker】Docker的网络与资源控制

Docker网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c;同时Docker网桥是每个容器的默认网关。因为在同一宿主机内…

什么是外汇杠杆交易?

外汇杠杆交易是目前的外汇交易市场中&#xff0c;投资者进行外汇交易的重要方式&#xff0c;通过这样的交易方式&#xff0c;投资者就有机会进行以小搏大的交易&#xff0c;他们的交易就有可能会更成功&#xff0c;因此&#xff0c;投资者应该对这样的交易方式进行了解&#xf…

【车展直播(1)】电机的知识

背景&#xff0c;最近在2024 北京车展&#xff0c;然后需要做一些直播讲解。 首先需要关注的是电动车的电机。其实这个东西吧&#xff0c;我不能算是完全知道&#xff0c;但是自己做做PWM 控制器&#xff0c;MOS管驱动&#xff0c;做两轮电机Motor 的控制这种基础的工作还是有…

Docker数据管理+镜像的创建

Docker容器数据管理方式 数据卷 数据卷是一个供容器使用的特殊目录&#xff0c;位于容器中&#xff0c;可将宿主的目录挂载到数据卷上&#xff0c;对数据卷的修改操作立即可见&#xff0c;并且更新数据不会影响镜像&#xff0c;从而实现数据在宿主机与容器之间的迁移。数据卷…

C#反射应用

1.根据类名名称生成类实例 CreateInstance后面的参数部分一定要和所构造的类参数数量对应&#xff0c;即使设置参数默认值&#xff0c;也不可省略。 2.只知道类名&#xff0c;需要将该类作为参数调用泛型接口。 3.只知道类名&#xff0c;需要将该类的数组作为参数调用泛型接口…