文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript原型与原型链知识点有哪些

2024-04-02 19:55

关注

本篇内容主要讲解“JavaScript原型与原型链知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript原型与原型链知识点有哪些”吧!

JavaScript原型与原型链知识点有哪些

一、原型

1.概念

在JavaScript中,函数是一个包含属性和方法的Function类型的对象。而原型(Prototype)就是Function类型对象的一个属性。

在函数定义时就包含了prototype属性,它的初始值是一个空对象。在JavaScript中并没有定义函数的原型类型,所以原型可以是任何类型。

原型是用于保存对象的共享属性和方法的,原型的属性和方法并不会影响函数本身的属性和方法。

// Function类型的属性->所有函数都具有的属性
console.log(Function.prototype);//[Function]

// 定义函数
function fn() {
    console.log('this is function');
}

//原型的默认值是空对象
console.log(fn.prototype);//fn {}

// 函数包含构造函数 ——> 所有引用类型其实都是构造函数
console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

2.获取原型

通过如下两种方式可以获取对象的原型,从而设置共享的属性和方法:

function fn() {
    console.log('this is function');
}

//使用访问对象的属性语法结构
console.log(fn.prototype);//fn {}
console.log(fn['prototype']);//fn {}

//Object类型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));//[Function]

3.了解函数原型上的constructor属性

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //输出结果如下:
//{
//   value: [Function: Object],
//   writable: true,
//   enumerable: false,
//   configurable: true
// }

constructor是在创建函数的时候自动添加的,指向构造函数本身

4.设置原型上的属性和方法

通过如下两种方式可以设置原型的属性和方法:

构造函数.prototype.属性名 = 属性值 ;构造函数.prototype.方法名 = function(){} ;

当我们需要在原型上添加很多很多属性的时候 一遍一遍的去写 构造函数.prototype.属性名 太麻烦了,可以直接修改整个prototype

构造函数.prototype = {
    属性名:属性值,
    方法名:function(){}}
function foo () {}foo.prototype = {
    constructor: foo,
    name: 'jam',
    age: 18,
    address: '北京市'}var fn = new foo()console.log(fn.address) // 北京市

5.isPrototypeOf()方法

每个对象中都会具有一个isPrototypeOf()方法,该方法用来判断一个对象是否是另一个对象的原型。

示例代码如下:
// 通过初始化器方式定义对象
var obj = {
    name:'jam'
}
// 定义构造函数
function Hero() {}
// 将对象obj赋值给构造函数Hero的原型
Hero.prototype = obj;
// 通过构造函数创建对象
var hero = new Hero();

// isPrototypeOf()方法判断指定对象是否是另一个对象的原型
var result = obj.isPrototypeOf(hero);
console.log(result);//true

验证了obj对象是hero对象的原型

二、原型链

1.原型链的理解

接下来我们使用一段代码来展开对原型链的认识:

场景:查找obj对象身上的address属性
js执行的步骤:
    1. 会触发get操作
    2. 在当前的对象中查找属性
    3. 如果没有找到,这个时候会去原型链(__proto__)对象上查找
       1. 查找到结束
       2. 没查找到一直顺着原型链查找,直到查找到顶层原型(顶层原型是什么暂时卖个关子)
1.1 示例代码如下:
var obj = {
    name: 'jam',
    age: 19
}


// 原型链一层一层向上查找,如果一直没有找到,直到查找到顶层原型结束
obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    address: '北京市'
}

console.log(obj.address) // 北京市
console.log(obj.__proto__.__proto__.__proto__)  // { address: '北京市' }
1.2 内存图

JavaScript原型与原型链知识点有哪些

最终查找到address属性
那么这里有一个问题,如果一直没有查到,会无穷尽的去查找吗?接下来我们就来了解一下

2.顶层原型是什么?

上面我们说到,顺着原型链不会无休止的去查找,当查到顶层原型的时候,如果还没查到就会返回undefined

那么顶层原型是什么呢?
示例代码如下:

var obj = { name: 'jam' }console.log(obj.__proto__)  // {}console.log(obj.__proto__.__proto__)  // null

字面量对象obj的原型是:{}{}就是顶层的原型
当我们继续向上打印__proto__时,返回一个null值,就证明上一层就已经是顶层原型了

如下图是针对第一段代码中缺少的顶层原型做的补充:
JavaScript原型与原型链知识点有哪些

顶层原型就是Object.prototype

3.Object的原型(Object.prototype)

3.1 那么什么地方是原型链的尽头呢?比如第三个对象是否也有原型__proto__属性呢?

var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__)  // {}

我们发现上面打印结果为 空对象{}

3.2 那么我们可能会问:{}原型有什么特殊的嘛?

4.原型链关系内存图

JavaScript原型与原型链知识点有哪些

到此,相信大家对“JavaScript原型与原型链知识点有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯