JavaScript原型和继承

CodeSheep 发布于2019-08-21 10:41 / 2995人阅读

摘要：在默认情况下，原型对象都会自动获得一个构造函数属性，这个属性包含包含一个指向属性所在函数的指针。此外这里被重写了，指向了看图这个搜索的过程搜索实例搜索搜索搜索总是一步步向前到原型链末端停止

《JavaScript高级程序设计第三版》学习笔记
Object-Oriented 有一个标志，就是都有类的概念，通过类来创建多个具有相同属性和方法的对象。而对于 EMCAScript中没有类的概念，ECMA-262把对象定义为
”无序属性的集合，该属性可以包含任何基本值，对象或者函数。“

原型模式

每个函数都有一个prototype(原型)属性

这个属性都有一个指针，指向一个对象

这个对象包含由特定类型所有实例共享的属性和方法

使用原型的好处是可以让所有对象实例共享它包含的方法和属性

通过in操作符和hasOwnProperty来判断给定属性是来自于原型还是实例
in- true 代表属性在对象中存在来自实例或者来自原型
hasOwnProperty- true代表属性来自于实例是实例属性

继承

ECMAScript中只支持实现继承，而且是通过原型链的方式来实现的

理解原型对象
是这样的
当我们创建一个新函数的时候，会根据一组特定的规则为该函数创建一个prototype属性，这个prototype属性指向函数的原型对象。在默认情况下，原型对象都会自动获得一个constructor(构造函数)属性，这个属性包含包含一个指向prototype属性所在函数的指针。
所以关系就是
比如有一个Person的对象
Person.prototype => 原型对象
原型对象.constructor => Person
即 Person.prototype.constructor == Person
见下图关系

将原型链作为实现继承的主要方法，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
demo代码

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
//SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
    return this.subproperty;
}

// 继承SuperType 就指向了SuperType的原型对象了
SubType.prototype = new SuperType();
var instance = new SubType();
alert(instance.getSuperValue()); // true
alert(instance.property); //true

如果把SubType中的subproperty改成property会是怎么样呢都会变成false

demo图解

备注：
之所以 SuperType中property属性会出现在，SubType.prototype中，是因为property是一个实例属性，而SubType.prototype是SuperType的一个实例对象，所以property属性会出现在SubType.prototype中，但是这个property相对于instance(SubType的一个实例)却又是一个原型属性，所以如果将subproperty换成property的话，在return this.property时，优先找到实例属性中有这么一个属性，就会返回实例属性。
此外这里SubType.prototype.constructor 被重写了，instance.constructor指向了SuperType 看图
instance.getSuperValue() 这个搜索的过程
1) 搜索实例
2) 搜索SubType.prototype
3) 搜索SuperType.prototype
搜索总是一步步向前到原型链末端停止(Object)

云服务器 GPU云服务器原型继承原型链继承 js原型链的继承 javascript原型

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

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

理解JavaScript的核心知识点：原型

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

iKcamp 2019-08-23 18:34 评论0 收藏0
白话解释 Javascript 原型继承(prototype inheritance)

摘要：我们有了构造函数之后，第二步开始使用它构造一个函数。来个例子这种方式很简单也很直接，你在构造函数的原型上定义方法，那么用该构造函数实例化出来的对象都可以通过原型继承链访问到定义在构造函数原型上的方法。来源: 个人博客白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过面向对象的同学们是否还记得，老师整天挂在嘴边的面向对象三大特...

kid143 2019-08-21 15:09 评论0 收藏0
彻底搞懂JavaScript中的继承

摘要：这正是我们想要的太棒了毫不意外的，这种继承的方式被称为构造函数继承，在中是一种关键的实现的继承方法，相信你已经很好的掌握了。你应该知道，JavaScript是一门基于原型链的语言，而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说，所谓的原型链就是一条继承链。有些困惑了吗？接着看下去吧。一、构造函数，原型属性与实例对象要搞清楚如何在JavaScript中实现继承，...

_ivan 2019-08-21 17:48 评论0 收藏0
[译] 为什么原型继承很重要

摘要：使用构造函数的原型继承相比使用原型的原型继承更加复杂，我们先看看使用原型的原型继承上面的代码很容易理解。相反的，使用构造函数的原型继承像下面这样当然，构造函数的方式更简单。五天之前我写了一个关于ES6标准中Class的文章。在里面我介绍了如何用现有的Javascript来模拟类并且介绍了ES6中类的用法，其实它只是一个语法糖。感谢Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 评论0 收藏0
JavaScript 的继承方式及优缺点

摘要：继承简介在的中的面向对象编程，继承是给构造函数之间建立关系非常重要的方式，根据原型链的特点，其实继承就是更改原本默认的原型链，形成新的原型链的过程。 showImg(https://segmentfault.com/img/remote/1460000018998684); 阅读原文前言 JavaScript 原本不是纯粹的 OOP 语言，因为在 ES5 规范中没有类的概念，在 ...

nanchen2251 2019-08-23 12:18 评论0 收藏0
Javascript 设计模式读书笔记(三)——继承

摘要：的继承方式属于原型式继承，非常灵活。当使用关键字执行类的构造函数时，系统首先创建一个新对象，这个对象会继承自构造函数的原型对象新对象的原型就是构造函数的属性。也就是说，构造函数用来对生成的新对象进行一些处理，使这个新对象具有某些特定的属性。继承这个东西在Javascript中尤其复杂，我掌握得也不好，找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承，...

cangck_X 2019-08-21 12:16 评论0 收藏0