首页 > 编程语言 >JavaScript 原型和原型链

JavaScript 原型和原型链

时间:2023-01-12 18:36:25浏览次数:31  
标签:JavaScript name 继承 Object 对象 原型

JavaScript 是一种基于原型继承的语言。在 JavaScript 中,对象是通过原型链来继承属性和方法的。

一、原型

每一个对象都有一个 proto 属性,该属性指向该对象的原型。原型本质上也是一个对象,所有的对象都拥有一个原型,除了 Object.prototype。

JavaScript 中有一个 Object.create() 方法可以用来创建一个新对象,并且可以指定该对象的原型。

例如:

let obj1 = {
  name: "object1",
  sayName: function() {
    console.log(this.name);
  }
};

let obj2 = Object.create(obj1);
console.log(obj2.name);  // "object1"
obj2.sayName(); // "object1"

在上面代码中,obj2 是通过 obj1 创建的,obj2 的原型是 obj1,所以 obj2 可以继承 obj1 的属性和方法。

二、原型链

原型链是一种链式结构,它描述了对象与其原型之间的关系。当对象访问一个属性或方法时,如果在自身中找不到,就会在其原型中寻找,如果在原型中还找不到,就会继续在原型的原型中寻找,直到找到为止或者到达原型链的顶端(Object.prototype)。

在 JavaScript 中,原型链的顶端是 Object.prototype,它是所有对象的根原型。Object.prototype 上面没有原型了。

同时原型链也可能会出现循环引用的情况,所以在使用原型链时需要注意避免这种情况。

JavaScript 中的原型和原型链是 JavaScript 中非常重要的一部分,它们是 JavaScript 继承的基础。在 JavaScript 中,所有的对象都是通过原型继承来继承属性和方法的,这样能够节省内存空间和提高代码复用性。

三、继承

对于 JavaScript 的继承来说,原型链是其中一种常用的方式,还有一种是 ES6 中新增的类和继承的概念。

ES6 中的 class 和 extends 关键字可以用来定义类和继承。这种方式和原型链继承本质上是一样的,只是语法上更加类似传统面向对象语言。

例如:

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    console.log(this.age);
  }
}

let child = new Child("Bob", 10);
child.sayName(); // "Bob"
child.sayAge(); // 10

在上面的代码中,使用 class 和 extends 关键字定义了一个父类 Parent 和一个子类 Child。Child 类继承了 Parent 类,也就是说 Child 对象可以继承 Parent 对象的属性和方法。

constructor 是类的构造函数,在使用 new 创建类的实例时会调用该函数。在子类中,使用 super(name) 调用父类的构造函数,这样可以继承父类的属性。

在子类中可以添加新的属性和方法,例如 sayAge 方法,这样就实现了对父类的继承和扩展。

JavaScript 的原型链和 ES6 中的 class 和 extends 都是实现继承的方式。其中原型链继承更加灵活,对于继承和扩展都比较方便,但是语法上比较麻烦。而 class 和 extends 的语法更加类似传统面向对象语言,更加易于理解,但是在继承和扩展上比较限制。

标签:JavaScript,name,继承,Object,对象,原型
From: https://www.cnblogs.com/yuzhihui/p/17047616.html

相关文章

  • JavaScript修改this指向
    修改this指向涉及到的方法:bind、call、apply bind说明:调用之后不会直接请求目标函数,而是会返回一个修改了this指向的函数,用于后面调用functionfun(old,gender){......
  • 使用 HTML、CSS 和 JavaScript 制作的随机密码生成器
    ----上图  ------MVC创建的视图,视图名称为A@{Layout=null;}<!DOCTYPEhtml><styletype="text/css">*{margin:0;padding:0;......
  • 【收藏】不可错过的javascript迷你库
    最近看着下自己的githubstar,把我吓坏了,手贱党,收藏癖的我都收藏了300+个仓库了,是时候整理一下了。Unix主张kiss,小而美被实践是最好用的,本文将介绍笔者收集的一些非常赞的......
  • JavaScript的深拷贝实现
    在实际开发当中,我们经常会遇到要对对象进行深拷贝的情况。而且深拷贝这个问题在面试过程中也经常会遇到,下面就对本人在学习过程中的收获,做以简单的总结。什么是浅拷贝,什么是......
  • javaScript教程
    一、发展历程javaScript是Netscape为了解决互联网初期网速过慢,而导致用户体验差而诞生的用在客户端语言。比如一次用户输入提交等待几十秒后,服务器悠哉悠哉的返回了个‘x......
  • javascript集合的使用 new Set()使用
        参考:https://blog.csdn.net/weixin_52941842/article/details/126338193......
  • JavaScript中数组的概念以及创建
     先给大家分享一些JavaScript的相关资料: ​​认识JavaScript到初体验​​​​JavaScript注释以及输入输出语句​​​​JavaScript变量的使用、语法扩展、命名规范​​​......
  • 案例方式学习JavaScript双重for循环
    先给大家分享一些JavaScript的相关资料: ​​认识JavaScript到初体验​​​​JavaScript注释以及输入输出语句​​​​JavaScript变量的使用、语法扩展、命名规范​​​​......
  • JavaScript的for循环学不明白看这篇
    JavaScript相关知识点内容: ​​认识JavaScript到初体验​​​​JavaScript注释以及输入输出语句​​​​JavaScript变量的使用、语法扩展、命名规范​​​​JavaScript数......
  • JavaScript 流程控制-实际案例学习if语句
     JavaScript前文回顾: ​​认识JavaScript到初体验​​​​JavaScript注释以及输入输出语句​​​​JavaScript变量的使用、语法扩展、命名规范​​​​JavaScript数据类......