首页 > 其他分享 >【JS基础】JS中的原型和原型链

【JS基础】JS中的原型和原型链

时间:2023-06-14 21:45:17浏览次数:33  
标签:对象 Object 基础 JS person 原型 student 属性

在 JavaScript 中,每个对象都有一个原型(prototype)属性,它指向另一个对象。

对象可以继承其原型对象的属性和方法。原型是 JavaScript 实现对象继承的基础概念之一,而原型链则是一种通过多层级原型连接起来的机制。

每个 JavaScript 对象(除了 null 和 undefined )都有一个原型对象,原型对象本身也是一个对象,它可以拥有自己的原型,形成原型链。

 

原型链是由对象的原型属性所组成的,当我们试图访问一个对象的属性或方法时,JavaScript 会首先在该对象自身上查找,如果找不到,就会去原型对象上查找;

如果还找不到,就会继续在原型对象的原型上查找,以此类推,知道找到该属性或方法,或者到达原型链的末尾(原型为 null)

下面是一个示例用来说明原型和原型链的概念:

const person = {
    name: 'jack'
}
// 创建一个新对象,并将其原型设置为 person
const student = Object.create(person)
student.id = 123

console.log(student.name)//jack
console.log(student.id)//123

// 在 student 对象中查找 age 属性,但是找不到
// 然后在 person 对象中查找,也找不到
console.log(student.age)        // undefined
// 最终在 Object.prototype 中找到 toString 方法
console.log(student.toString()) // [object Object]

上面的示例中,我们创建了一个 person 对象,并将其作为 student 对象的原型。

student 对象继承了 person 对象的属性和方法,包括 name 属性。

当我们访问 student.name 时,由于 student 对象本身没有 name 属性,JavaScript 会通过原型链在 person 对象中找到该属性并返回。

 

原型链的终点是 Object.prototype ,它是所有对象的原型。

Object.prototype 没有自己的原型,形成了原型链的最后一个环节。

在上述示例中,当我们调用 student.toString() 时,student 对象无法在自身和 person 对象中找到 toString 方法,但在原型链中的 Object.prototype 中找到了该方法。

 

原型链的概念是 JavaScript 实现继承的基础。

通过在原型链上查找属性和方法,对象可以共享和继承它们呢,这种机制使得对象之间可以实现属性和行为的复用,提高了代码的灵活性和可维护性。

 

标签:对象,Object,基础,JS,person,原型,student,属性
From: https://www.cnblogs.com/zjy4fun/p/17481399.html

相关文章

  • vue-基础
    项目的注意事项:1.template必须是一个且必须有一个跟元素2.导入的时候webpack默认导出的整个组件整个组件包含了data言外之意整个组件包含了你所要导出的对象3.一个vue的实例只能挂载一个标签。1.插值表达式:{{数据}}在data里面data(){return{..}}注意点:1.......
  • js中substring
    js中substring主要用于切割字符串,我用的很少,最近再看源码的时候看到了substring,用的也比较少,积累一下例:letstr='abcdefg'str=str.substring(4);console.log(str)//输出'efg'直接截取一个想要的长度,从开头截取,并返回一个被截取之后得的值......
  • 【JS基础】Function构造函数
    Function()构造函数创建了一个新的Function对象,直接调用构造函数可以动态创建函数,与eval(可能访问到本地作用域)不同的是,Function构造函数只创建全局执行的函数。constsum=newFunction('a','b','returna+b')console.log(sum(1,2)); 参考:Function()构造函数-J......
  • uniapp vue.config.js配置chunk-vendors.js文件拆分
    constpath=require('path')functionresolve(dir){returnpath.join(__dirname,dir);}constCompressionPlugin=require('compression-webpack-plugin')consthtmlWebpackPlugin=require('html-webpack-plugin')htmlWebpackPl......
  • python基础知识——字符串
    1、字符串的格式化python将若干值插入到带有“%”标记的字符串中,实现动态地输出字符串。格式:"%s"%str"%s%s"%(str_1,str_2)例如:str_0="I"str_1="Love"str_2="China"format="%s%s%s"%(str_0,str_1,str_2)printformat#ILoveChi......
  • python基础知识——内置数据结构(集合)
    python中的set是指一系列无序元素的集合,其中的元素都是相异的,常见的操作包括集合的并集,交集和补集等操作。1、set的创建格式set_name={value1,value2,...}创建空的集合set_name=set()注意:在创建空的集合的时候不能使用set_name={}这样创建出来的是字典。例如animals......
  • 【JS错题总结】作用域链问题
    作用域链上面代码的输出是GoodbyeJack,因为执行到语句typeofname==='undefined' 的时候,函数会从内向外(作用域链)寻找该变量,从语句var name;找到该变量的定义,该变量此时的值为undefined。自执行函数解析和执行一起完成,自己有的不会再向上查找。varname='zhangsan'......
  • 【JS错题总结】node中的微任务
    答案是n1n2p1p2 原因:node中的微任务包含两部分:1.process.nextTick()注册的回调(nextTicktaskqueue)2.promise.then()注册的回调(promise taskqueue) node在执行微任务时,会优先执行nextTicktaskqueue中的任务,执行完之后接着执行promisetaskqueue......
  • 【python基础】函数-初识函数
    函数是带名字的代码块,用于完成具体的工作,无需反复编写完成该工作的代码。之前我们接触过print函数,数据类型转换中的int函数、str函数,还有列表中的append函数、pop函数、remove函数,以及字典中的keys函数、values函数等等,其实在正式学习函数之前,我们已经接触了函数,只不过没有接触过......
  • python基础知识——内置数据结构(字典)
      字典是有“键-值”对组成的集合,字典中的“值”通过“键”来引用。“键-值”对之间用逗号隔开,并且被包含在一对花括号中。1、字典的创建格式dictionary_name={key1:value1,key2:value2,...}创建空的字典dictionary_name={}例如dict={'b':'beijing','s':......