首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS中的原型继承以及如何获取父属性

原型继承是JavaScript中实现对象间继承的一种方式。在原型继承中,一个对象的原型对象指向另一个对象,从而实现对原型对象的属性和方法的访问。原型链是由多个对象按照原型关系连接而成的链状结构,当访问一个对象的属性时,如果该对象本身没有这个属性,JavaScript会沿着原型链向上查找,直到找到具有该属性的对象或者到达原型链的末端。

在JavaScript中,可以通过以下方式实现原型继承:

  1. 通过Object.create()方法创建一个新对象,该对象的原型对象指向另一个对象。
代码语言:javascript
复制
var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var child = Object.create(parent);
child.name = 'child';

child.sayHello(); // 输出 "Hello, child"
  1. 通过构造函数实现原型继承。
代码语言:javascript
复制
function Parent() {
  this.name = 'parent';
  this.sayHello = function() {
    console.log('Hello, ' + this.name);
  };
}

function Child() {
  Parent.call(this);
  this.name = 'child';
}

var child = new Child();
child.sayHello(); // 输出 "Hello, child"

要获取父属性,可以通过以下方式:

  1. 使用Object.getPrototypeOf()方法获取对象的原型对象。
代码语言:javascript
复制
var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var child = Object.create(parent);
child.name = 'child';

var parentProto = Object.getPrototypeOf(child);
console.log(parentProto.name); // 输出 "parent"
  1. 使用proto属性获取对象的原型对象。
代码语言:javascript
复制
var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var child = Object.create(parent);
child.name = 'child';

console.log(child.__proto__.name); // 输出 "parent"

推荐的腾讯云相关产品:

  • 腾讯云云服务器(CVM):提供高性能、高可靠性的云计算服务,支持多种操作系统和自定义镜像。
  • 腾讯云云数据库(TencentDB):提供MySQL、MongoDB、Redis等多种数据库服务,支持自动备份、监控告警等功能。
  • 腾讯云对象存储(COS):提供高可靠、低成本的云存储服务,支持多种存储类型和API接口。
  • 腾讯云API网关:提供API管理、监控告警等功能,支持多种认证授权方式和API接口访问。

推荐的腾讯云相关产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS面向对象、原型原型链、继承总结大全

补充: js说一切都是对象,是不完全,在js6种数据类型(Undefined,Null,Number,Boolean,String,Object),前五种是基本数据类型,是原始值类型,这些值是在底层实现...属性查找机制 js实例属性查找,是按照原型链进行查找,先找实例本身有没有这个属性,如果没有就去查找查找实例原型对象,也就是[[prototype]]属性指向原型对象,一直查到Object.prototype...,也是本篇最重要内容: 1.属性继承 在子构造函数内,使用apply()或call()方法调用构造函数,并传递子构造函数this 2.方法继承 使用上文提到原型继承,继承构造器方法 上代码...call()调用Parent(),在new Child()创建实例时候,执行Parent代码,而此时this已经被call()指向Childthis,所以新建子实例,就拥有了实例全部属性...方法继承,就是上文讲原型链机制继承,另外可以给子构造函数添加自己属性和方法。 这就是经典继承,避免了但是使用构造函数或者单独使用原型缺陷,成为js中最常用继承方式。

1.4K22
  • 深入理解javascript继承机制(3)属性复制对象之间继承深复制原型继承原型继承属性复制混合使用

    我们开始换一种思路实现继承,可不可以直接将对象属性直接复制给子对象,这样子对象不久也拥有了对象属性,相当于继承。...属性复制 下面我们就实现这样一种继承方式,将父亲原型对象属性全部复制到子对象原型属性 function extend2(Child, Parent) { var p = Parent.prototype...对象之间继承 extend2,我们都是以构造器创建对象为基础,我们将原型对象属性一一拷贝给子原型对象,而这两个原型本质上也是对象。现在我们考虑不通过原型,直接在对象之间拷贝属性。...Paste_Image.png 原型继承 下面我们介绍一种在ES5被采纳继承方式,称作原型继承,Object.create(object)可以调用他。...原型继承可以在新建一个对象时候,将已有对象设置为新对象原型属性拷贝,就是在新建一个对象之后,将另一个已有对象属性拷贝过来。 我们将这两项功能放在一个函数

    1.4K20

    CSS3如何解决子元素继承元素opacity属性

    问题 css3opacity属性是用来设置 div 元素不透明级别的,但是我们往往会遇到因为级元素设定opacity后,子元素也跟着透明了,但是有时候我们只是想让背景是透明,这该如何解决呢?...opacity属性 子元素会继承级元素opacity属性 这样我们得到是无效:...那我们应该如何解决呢?...解决方案 这里有两个方案,使用rgba()间接设定opacity值,这个属性不会向下继承,或者既然opacity会被子级元素继承,那就把opacity属性放到同级元素实现,下面通过示例具体说说这两种方式...opacity属性 子元素会继承级元素opacity属性 效果如下: 发布者:全栈程序员栈长

    3.9K20

    深入理解javascript继承机制(1)原型继承机制将共有的属性放进原型

    javascript继承机制是建立在原型基础上,所以必须先对原型有深刻理解,笔者在之前已经写过关于js原型文章。...Paste_Image.png 我们看到实现原型继承关系之后,my作为子对象,同时都是对象一种,这是符合java等语言中继承概念。...将共有的属性放进原型 如上个例子,name属性是三对象共有的,上个例子每个单独对象都会new出一个name属性,这样就造成了对空间浪费。...Paste_Image.png 将部分共享属性移到原型里去之后,原型继承关系如图,对比之前简洁了一些,因为没有多余重复属性 ?...所以在某些时候,就没法使用这种继承模式,这种将共享属性移到原型模式,会产生子对象覆盖掉对象共有属性缺陷。

    53320

    揭秘Java反射:如何轻松获取属性属性

    相信很多小伙伴在学习Java过程,都曾经遇到过需要动态地获取属性和方法场景。而Java反射正是解决这个问题利器。那么,如何使用Java反射来获取属性属性呢?...简单来说,Java反射就是运行时能够获取信息,并且可以操作类或对象一种机制。通过Java反射,可以在运行时获取构造方法、成员变量、成员方法等信息,甚至可以创建对象、调用方法等。...二、Java反射获取属性接下来,重点讲解一下如何使用Java反射获取属性。需要获取到类Class对象,然后通过这个Class对象就可以获取到类所有属性了。...// 获取Person类所有属性(包括属性) for (Field field : fields) { System.out.println("属性名:" +...:属性名:name属性类型:class java.lang.String属性名:age属性类型:int可以看到,成功地获取到了Person类属性以及属性

    57910

    深入理解javascript继承机制 之 12种继承模式总结原型链法仅从原型继承临时构造器原型属性拷贝所有属性拷贝(浅拷贝)深拷贝原型继承法扩展与增强模式多重继承法寄生式继承借用构造函数:构造器于

    之前我们介绍了多种javascript继承方式,最后我们开始总结概括这些继承方式,先将javascript继承分类,根据不同条件,可以分成不同类别。...继承模式 原型链法 示例: Child.prototype = new Parent(); 分类: 使用了原型 基于构造器继承模式 ** 注意 **: 默认继承机制 我们可以将需要重用属性和方法移到原型...** 注意 **: 是前面几种方法改进,只继承原型对象属性和方法,自身属性和方法是不继承 通过uber可以方便访问到对象 原型属性拷贝 实例: function extend2(Child...使用了原型链 ** 注意 **: 原型所有属性拷贝到子原型上 不用new出新对象 更短原型链 所有属性拷贝(浅拷贝) 实例: function extendCopy(p) { var c =...,arguments); } extend2(Child,Parent); 分类: 基于构造器模式 使用原型属性拷贝 ** 注意 ** 借用构造器与原型属性拷贝结合 允许在不重复调用对象构造器情况下同时继承自身属性原型属性

    46220

    JS 面试题 大全

    4、介绍 js 有哪些内置对象? 5、javascript 创建对象几种方式? 6、js 获取原型方法? 7、什么是闭包,为什么要用它? 8、三种事件模型是什么?...***Es5继承有: ①.原型继承实例作为子类原型 ②.借用构造函数继承:在子类适用call方法,调用方法,并将this改为子类this ③.组合继承:既可以调用类实例属性又能调用原型属性...ES6有class继承: ①.class就相当于Es5构造函数 ②.class定义方法签后不能加function ,全部定义在classprototype属性 ③.class只能定义方法...,不能定义定义对象变量等 ④.class默认为严格模式 ⑤.在子类,调用extends方法,可以调用属性,用eat调用方法 ---- 29、JS 主要有哪几类错误?...33、JS高阶函数? 34、如何区分声明函数和表达式函数? 35、JS“严格”模式是什么以及如何启用? 36.请描述event loop(事件循环、事件轮询)机制,可画图?

    1.6K30

    JS基础-完美掌握继承知识点

    前言 上篇文章详细解析了原型原型相关知识点,这篇文章讲的是和原型链有密切关联继承,它是前端基础很重要一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS各种继承方式和优缺点进行,希望看完本篇文章能够对继承以及相关概念理解更为透彻...本篇文章需要先理解原型原型以及call相关知识: JS基础-函数、对象和原型原型关系 js基础-面试官想知道你有多理解call,apply,bind? 何为继承?...PS:或者是多个类 JS实现继承原理 记住这个概念,你会发现JS继承都是在实现这个目的,差异是它们实现方式不同。 复制属性和方法来重写子类原型对象。...原型继承获取属性和方法 fatherFn通过this声明属性/方法都会绑定在new期间创建新对象上。...值得一提是:很多博客说,引用类型属性被所有实例共享,通常会用数组来举例,实际上数组以及其他类通过this声明属性也只是通过原型链查找去获取子类实例原型(sonFn.prototype)上

    58320

    如何实现Python多重继承(Multiple Inheritance)以及方法解析顺序(MRO)

    继承是一种重要机制,它允许我们创建一个新类,并从一个或多个现有类中继承属性和方法。...Python继承支持多重继承,即一个类可以从多个类中继承。本篇博客将介绍如何在Python实现多重继承,并解释方法解析顺序(MRO)概念和作用。...多重继承实现在Python,实现多重继承非常简单,只需要在定义类时,将多个类放在类定义括号内即可。下面我们通过一个例子来演示多重继承实现。...我们创建了一个类C实例c,并调用了其继承自类A和类B方法method_a和method_b,以及自己定义方法method_c。...而使用MRO可以确保方法调用顺序是正确。总结本篇博客介绍了如何在Python实现多重继承,并解释了方法解析顺序(MRO)概念和作用。通过示例代码,我们演示了多重继承实现和MRO工作原理。

    77210

    每天10个前端小知识 【Day 9】

    说说ajax原理,以及如何实现?...说到js继承,最开始想到应该是是原型继承,通过把子类实例原型指向类实例来继承属性和方法,但原型继承缺陷在于对子类实例继承引用类型修改会影响到所有的实例对象以及无法向构造方法传参...构造函数继承, 通过在子类构造函数调用类构造函数并传入子类this来获取属性和方法,但构造函数继承也存在缺陷,构造函数继承不能继承原型链上属性和方法。...后面有了组合式继承,但也有了新问题,每次都会执行两次构造方法,最终有了寄生式组合式继承。 5. JavaScript原型原型链分别是什么?...原型 JavaScript 常被描述为一种基于原型语言——每个对象拥有一个原型对象 当试图访问一个对象属性时,它不仅仅在该对象上搜寻,还会搜寻该对象原型以及该对象原型原型,依次层层向上搜索

    10510

    JS入门难点解析12-继承实现方式与优缺点

    简介 在前面两节,我们花了大量篇幅来介绍如何创建对象(JS入门难点解析10-创建对象)以及构造函数,原型对象和实例对象三者定义和关系(JS入门难点解析11-构造函数,原型对象,实例对象)。...我们知道,JavaScript是一种基于对象脚本语言,而在ES6之前JS没有类概念。如何将所有的对象区分与联系起来?如何更好地组织JS代码呢?...下面我们详细介绍实现JS继承两类四种方式和这几种方式组合,以及他们各自优缺点。 3. 模拟类继承 正如第2节所述,JS设计者为我们提供了一个最直接思路。...缺点 原型定义公共属性和方法无法被继承类构造函数发生改动时,可能会影响到子类构造函数以及实例构造方法,而且这种变动不会影响到之前已经生成实例。...,而原型属性被copy到了子类,子类可以共享类和子类原型定义属性

    1.3K40

    javascript你必须要知道原型原型

    主要内容如何用 class 实现继承如何理解 JS 原型(隐式原型和显示原型)instanceof 是基于原型链实现JS 原型相关面试题关键字原型原型链instanceofclass继承----如何用...属性方法继承es6继承本质上是原型链 + 盗用构造函数extends(继承)super(执行类构造函数)扩展或重写方法class是面向对象一个语法实现class相当于一个模板,可以通过这个模板去构建一些东西...,用constructor构建器构建可以用constructor去复制他属性和方法如何理解 JS 原型(隐式原型和显示原型JS原型 每个class都有显式原型 prototype 每个class实例化后都有隐式原型...proto 实例隐式原型指向对应class显式原型instanceof可以判断引用类型 比如Object是People类,People是Student类class类具有定义属性和方法,也有显示原型...)每个实例对象都有 proto / [[prototype]](隐式原型)实例对象proto (隐式原型) 指向构造函数 prototype(显式原型)执行规则:获取实例对象属性或方法时先在自身属性和方法寻找若找不到则自动通过原型链一层一层向上查找此原型链图解可对照上面

    49331

    上一期前端面试题整理答案

    js里常用的如下两种继承方式: 原型继承(对象间继承) 类式继承(构造函数间继承) 由于js不像java那样是真正面向对象语言,js是基于对象,它没有类概念。...js可以通过构造函数和原型方式模拟实现类功能。 另外,js类式继承实现也是依靠原型链来实现原型继承与类式继承 类式继承是在子类型构造函数内部调用超类型构造函数。...(this); } 原型继承是借助已有的对象创建新对象,将子类原型指向类,就相当于加入了类这条原型原型继承 为了让子类继承属性(也包括方法),首先需要定义一个构造函数。...,因此,isPrototypeof()方法也会返回true 在js,被继承函数称为超类型(类,基类也行),继承函数称为子类型(子类,派生类)。...,其背后思路是 使用原型链实现对原型属性和方法继承,而通过借用构造函数来实现对实例属性继承

    1.2K70

    《JavaScript 模式》读书笔记(6)— 代码复用模式2

    同时,并不能继承那些已添加到原型成员。   使用该借用构造函数模式时,子对象获得了继承成员副本,这与类式继承模式#1,仅获取引用方式是不同。...借用构造函数模式优缺点 借用构造函数模式缺点是很明显,如前面所述,其问题在于根本无法从原型继承任何东西,并且原型也仅是添加可重用方法以及属性位置,它并不会为每个实例重新创建原型。   ...本模式一个优点在于可以获得对象自身成员真实副本,并且也不会存在于子对象意外覆盖对象属性风险。   因此,在前面的情况如何才能使子对象也能够继承原型属性?...以及如何使kid能够访问say()方法?...,以上代码运行后结果对象能够获得对象本身成员副本以及指向对象可复用功能(以原型成员方式实现那些功能)引用。

    34610

    你需要知道webpack高频面试题

    /src/index.jsoutput 出口,告诉webpack在哪里输出它打包好代码以及如何命名,默认为./dist什么是loader,plugins?...CSS需要使用purify-CSS继承 8种原型继承重点:子原型对象为new一个实例 Child.prototype = new Parent();缺点:多个实例对引用类型操作会被篡改借用构造函数继承重点...:在子构造函数内部调用构造函数 Parent.call(this)缺点:无法实现复用,不能继承原型属性/方法组合继承重点:使用原型继承共享属性和方法,通过借用构造函数继承实例属性function...()可替换上面的方法object() var person1 = Object.create(person);缺点:原型继承多个实例引用类型属性指向相同,存在篡改可能;无法传递参数寄生式继承重点:...,这样子类就能使用原型属性/方法inheritPrototype(Child, Parent);优点:只调用一次构造函数,原型链不变,是最成熟混入方式继承多个方式重点:利用Object.assign

    50120

    如果使用 JavaScript 原型实现继承

    作者:Indermohan Sing 译者:前端小智 来源:blog 在这篇文章,我们将讨论原型以及如何JS 中使用它们进行继承。我们还将会看到原型方法与基于类继承有何不同。...原型是什么? 在 JS ,所有对象都有一个特殊内部属性,该属性基本上是对另一个对象引用。 此引用取决于对象创建方式。...当我们访问属性时这里发生了什么? 当我们访问一个属性获取它时,会发生以下情况: JS 引擎查找对象上属性,如果找到了该属性,然后返回它。...使用原型继承各种方法 在 JS ,无论我们如何创建对象,只有原型继承,但这些方式还有一些区别,来看看: 对象字面量 在JavaScript创建对象最简单方法是使用对象字面量: let obj =...这类似于在面向对象世界调用构造函数。 接下来事情是,我们必须从SmartPhone构造函数继承方法。

    68720
    领券