【JavaScript】【对象】更好地理解对象继承

Youngs 发布于2019-08-21 13:33 / 2178人阅读

摘要：每一个通过构造函数实例化的对象和都具有构造函数中的属性，实例和构造函数之间是构造关系构造过程中也形成了原型关系是的原型，是的原型，实例通过原型链找到原型中的属性和方法。自定义和构造函数的属性是自有属性，它们是对象本身的属性。

继承原理：实例中包含一个指向原型对象的内部指针

实现方法：让原型对象等于另一个类型的实例

关键点：

构造函数、原型对象、实例

实例属性、原型方法

构造关系、原型关系

自有属性、继承属性和方法

demo：

//构造器
function Animal() {
    this.animal = "animal";
};
function Mammal() {
    this.mammal = "mammal";
};
var cat;

//原型链
Mammal.prototype = new Animal();
cat = new Mammal();

//添加属性和方法
Animal.prototype.isAnimal = true;
Animal.prototype.sayAnimal = function() {
    alert("Is it " + this.animal + "? " + this.isAnimal);
};
Mammal.prototype.isMammal = true;
Mammal.prototype.sayMammal = function() {
    alert("Is it a " + this.mammal + "? " + this.isMammal);
};

先来看看每个对象都能访问到哪些属性和方法：

Animal.prototype:

isAnimal    //自定义
sayAnimal()    //自定义

Mammal.prototype:

isMammal    //自定义
sayMammal()    //自定义
animal    //来自构造函数
isAnimal    //来自继承
sayAnimal()    //来自继承

cat:

mammal    //来自构造函数
isMammal    //来自继承
sayMammal()    //来自继承
animal    //来自继承
isAnimal    //来自继承
sayAnimal()    //来自继承

在这个demo中，有两对构造关系和两对继承关系（不考虑Object）。每一个通过构造函数实例化的对象（Mammal.prototype和cat）都具有构造函数中的属性，实例和构造函数之间是构造关系；构造过程中也形成了原型关系：Mammal.prototype是cat的原型，Animal.prototype是Mammal.prototype的原型，实例通过原型链找到原型中的属性和方法。

自定义和构造函数的属性是自有属性，它们是对象本身的属性。来自继承的属性和方法是对象沿着原型链找到的，它们并不是对象本身的属性和方法。

实例继承到的方法的作用域是该实例对象内部的执行环境，可以访问实例能获取到的所有属性。通过this.property的方式可以得到实例对象能够访问到的所有属性和方法，包括自有属性和继承的属性方法。demo中的实例对象cat可以访问到在Animal和Mammal及其原型中定义的所有属性方法，这正是继承的意义所在。

验证：

console.log(cat.mammal);    //mammal
console.log(cat.isMammal);    //true
console.log(cat.sayMammal());    //Is it mammal? true
console.log(cat.animal);    //animal
console.log(cat.isAnimal);    //true
console.log(cat.sayAnimal());    //Is it animal? true

转载请注明出处：https://segmentfault.com/a/1190000004550787

文章不定期更新完善，如果能对你有一点点启发，我将不胜荣幸。

专线服务 idc机房托管理解对象对象继承objective-cclass 更好地大数据更好地

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87726.html

如何更好地理解Javascript对象的自有属性和原型继承属性

摘要：对象具有自有属性，也有一些属性是从原型对象继承而来的。为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细节。在给对象的属性赋值时，是在原始对象上创建属性或者对已有属性赋值，而不会去修改原型链。 Javascript对象具有自有属性（own property），也有一些属性是从原型对象继承而来的。为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和...

kviccn 2019-08-21 10:36 评论0 收藏0
【译】每个JavaScript 开发者应该了解的10个面试题

摘要：避免脆弱的基类问题。红牌警告没有提到上述任何问题。单向数据流意味着模型是单一的事实来源。单向数据流是确定性的，而双向绑定可能导致更难以遵循和理解的副作用。原文地址 1. 你能说出两种对 JavaScript 应用开发者而言的编程范式吗？希望听到： 2. 什么是函数编程？希望听到： 3. 类继承和原型继承的不同？希望听到 4. 函数式编程和面向对象编程的优缺点？ ...

mykurisu 2019-05-22 18:24 评论0 收藏0
7个 Javascript 面试题及回答策略

摘要：使用异步编程，有一个事件循环。它作为面向对象编程的替代方案，其中应用状态通常与对象中的方法搭配并共享。在用面向对象编程时遇到不同的组件竞争相同的资源的时候，更是如此。翻译：疯狂的技术宅原文：https://www.indeed.com/hire/i... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章不管你是面试官还是求职者，里面...

李义 2019-08-23 15:40 评论0 收藏0
理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
十分钟快速了解《你不知道的 JavaScript》（上卷）

摘要：最近刚刚看完了你不知道的上卷，对有了更进一步的了解。你不知道的上卷由两部分组成，第一部分是作用域和闭包，第二部分是和对象原型。附录词法这一章并没有说明机制，只是介绍了中的箭头函数引入的行为词法。第章混合对象类类理论类的机制类的继承混入。最近刚刚看完了《你不知道的 JavaScript》上卷，对 JavaScript 有了更进一步的了解。《你不知道的 JavaScript》上卷由两部...

赵春朋 2019-08-26 12:16 评论0 收藏0