1. 为什么需要原型
构造器创建对象的时候, 实际上会有成员重复
如果使用 构造器 this.方法名 = function .... 方式创建对象. 那么每一个对象
对应的方法就会重复.

解决办法就是让这个方法( 函数 )共享
-> 将函数写到外面, 那么 Person 在初始化对象的时候就不会再创建一个函数了.
只需要将 外面的函数引用 交给对象即可.

缺点: 一个对象可能有 n 多方法. 如果将所有的东西 都放到外面, 与其他库
冲突的几率就会变大. 所以不宜采取该方法.
-> 将所有的方法( 函数 )都绑定到一个对象中.

-> js 原生就支持解决该问题的办法
每一个函数都有 一个属性 prototype
该属性指向一对象. 每一个函数的该对象都是存在.
(重点) 每一个由该函数作为构造器创建的对象, 都会默认连接到该对象上.
如果访问对象的方法, 而对象中没有定义, 就会在这个 构造函数.prototype
表示的对象中去找.

-> prototype 就是原型之意

2. 针对构造函数而言, 原型就是 构造函数的 prototype 属性, 常常将其称为 原型属性.
针对实例对象而言, 原型就是 实例对象的 原型对象.

例:
function Person () {} // 有了构造函数, 和 原型
var p = new Person(); // 有了实例

3. 一般如何使用原型对象
-> 简单的说就是将共享的方法放到原型中, 而独有数据与行为放在当前对象里
-> 例:
Person( name, age, gender, sayHello, eat, run )
-> 直接给原型对象添加成员
-> 直接替换原型对象( 注意: 手动的添加 constructor 属性, 表示对应的构造函数 )

4. __proto__
和 prototype 是否存在关系

早期浏览器是不支持 __proto__
火狐率先使用该属性, 但是是非标准
基本现在的新浏览器都支持该属性

-> 访问
使用构造函数, 就使用 prototype 属性访问原型
使用实例对象, 就使用 非标准的 __proto__ 属性访问原型

5. 继承
-> 什么是继承
自己没有, 别人有, 拿过来自己用, 就好像自己的一样.
-> 原型与实例对象
在 js 中, 方法定义在原型对象中, 而属性定义在实例对象中
调用方法的时候, 实例对象本身是没有该成员的, 但是依旧可以调用
该方法, 好像这个方法就是该实例对象的一样. 因此, 我们称该实例对象
继承自 原型对象
-> 任何一个实例, 都是继承自其原型对象的. 即原型式继承.

6. 为什么需要继承
-> 编程的发展
复用( 重复使用 )

div 标签对象 nodeName, nodeType, nodeName, ...
appendChild, insertBefore, getElementsByTagName, ...

a 标签对象

baseElement

-> js 运行效率
共享特性
复用

7. 传统的编程语言的面向对象操作
-> 对象: 是具有方法和属性的逻辑单元
在 js 函数是一个特殊的数据类型( 函数在 js 是一等公民 )
js 对象就是键值对, 值如果是数据, 那么键值就构成属性
如果值是函数, 那么就构成方法.

-> 创建方式
类 -> 实例化 -> 对象( 实例 )

class Person {
public string name;
public int age;
public string gender;

public void sayHello () {
// ...
}
}
// 类, 用来描述对象的结构, 它就是一个模板

Person p = new Person(); // 利用模板创建对象

// 访问属性
p.name
// 调用方法
p.sayHello();

传统的面向对象编程语言, 重点需要一个"模板", 即 类( class )

-> 传统的继承
传统的继承是模板的继承.

class Student : Person {
}

Student s = new Student();
// 注意此时 s 就可以调用 sayHello 方法
// 可以使用 name, age, 和 gender 属性了

8. 相关概念
类 class 模板 构造函数, 类名就是构造函数名
子类 subclass 派生的模板 原型设置为指定对象的构造函数
实例 instance 某个类的对象 ...
实例成员(实例方法, 实例属性)
静态成员
静态方法 ... 直接绑定在函数上的方法
静态属性 ... 直接绑定在函数上的属性

// js 代码
function Person () {
this.name = '黄帝';
this.age = 0;
this.gender = '男';
}

// 不叫子类, 只是一个 Student 类
function Student() {
}

// 继承派生 成为子类
Student.prototype = new Person();

// 即完成派生
var s = new Student();
s.name // OK

9. 属性访问原则( 重点 )
1) 对象在调用方法或访问属性的时候, 首先在当前对象中查询. 如果有该成员使用并停止查找.
2) 如果没有该成员就在其原型对象中查找. 如果有该成员即使用, 并停止查找.
3) 如果还没有就到 该对象的 原型对象 的 原型对象中查找.
...
4) 最后会查到 Object.prototype 上. 如果还没有即 返回 undefined.

10. 如果修改原型对象中的属性值会怎样
给当前对象的原型提供的属性赋值, 实际上是给当前对象添加了该属性的新成员
并不会修改运行对象中的成员.

11. 混入( mix )

var o1 = { name: '张三' };
var o2 = { age: 19 };
-----------
o2.name = o1.name
利用这个简单的赋值, 就可以将一个对象中的成员加到另一个对象中

混入使得 o2 具有了 age 和 o1 中的 name. 即将 o1 混入到 o2 中

混入也是一种继承的方式

12. 如何使用代码实现混入

// 考虑需要执行, 写函数即可
// 由于将 一个 对象混入到 另一个对象. 所以有两个参数
function __mix__ ( obj, obj1 ) {
// 如何获得 obj1 中的所有成员?
for ( var k in obj1 ) {
obj[ k ] = obj1[ k ];
}
}

13. 原型式继承
-> 写一个构造函数, 如果需要将其实例继承自某个特定的对象 o. 那么
只需要设置该构造函数的 prototype 属性为 o 即可

function Person {}

var o = { ... }

Person.prototype = o; // 继承

14. 混合式继承
-> 混合就是将多个对象的各个功能混合到一起, 加到构造函数的原型对象上.
那么该构造函数创建的实例 就继承自多个对象了.

15. 对象 -> 父对象 -> 父对象的父对象 -> ... -> 原对象 -> ....
链式结构( 原型链 )

由于链越深, 属性搜索越需要性能. 所以一般少用深层次的链式结构继承
一般使用时, 链结构只有 3 级. 一般都是使用混入, 在原型上加成员

16. ES5 中 的 Object.create
继承的最经典结构
function Animal() {}

function Person() {}

Person.prototype = new Animal();

语法:
新对象 Object.create( 原对象 );

转载于:https://www.cnblogs.com/yedliu/p/6443394.html

面向对象的原型与继承相关推荐

  1. 【笔记】JavaScript高级篇——面向对象、原型、继承

    原文链接:http://www.hansmkiii.com/2018/07/06/javascript-node-1/ " 面向对象.原型.继承 " 1.面向对象 1.1 什么是面 ...

  2. JS高级讲解面向对象,原型,继承,闭包,正则表达式,让你彻底爱上前端(进阶二)...

    JavaScript 高级 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 面向对象介绍 程序中面向对象的基本体现 ...

  3. 前端进击的巨人(七):走进面向对象,原型与原型链,继承方式

    "面向对象" 是以 "对象" 为中心的编程思想,它的思维方式是构造. "面向对象" 编程的三大特点:"封装.继承.多态" ...

  4. 【面试必备】javascript的原型和继承

    摘要: 原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲 ...

  5. JS 面向对象与原型

    创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个 Object 对象 box.name = 'Lee'; //创建一个 name 属 ...

  6. 从babel实现es6类的继承来深入理解js的原型及继承

    先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...

  7. JS面向对象,创建,继承

    很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...

  8. JS面向对象的程序设计之继承-继承的实现-借用构造函数

    JS面向对象的程序设计之继承-继承的实现-借用构造函数 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...

  9. 实例对象的属性和原型对象中的属性重名问题 神奇的原型链 继承 继承案例

    实例对象的属性和原型对象中的属性重名问题 <!DOCTYPE html> <html lang="en"> <head><meta cha ...

最新文章

  1. CV领域论文常用单词汇总
  2. 在SQL Server中将数据导出为XML和Json
  3. Win7x64+VS2012+OpenCV2.4.3+CMake2.8.10+TBB41重编译OpenCV
  4. 转: 基于elk 实现nginx日志收集与数据分析
  5. k8s API编程:kubebuilder实战案例sidecarset
  6. 今晚直播 | 商汤科技X-Lab刘宇:神经网络结构与大规模优化方法
  7. webpack学习1-打包
  8. Spring事务操作-事务引入
  9. 华硕主板如何u盘启动电脑
  10. 太真实了!程序员之间的鄙视链...
  11. android spi读写不通,Android-SPI学习笔记
  12. 自制计算机语言,3个步骤实现简单语言解释器(自制简易编程语言)
  13. 设计原则 —— 针对接口编程而不针对实现编程
  14. eclipse创建maven项目的创建
  15. C#学习笔记——.NET
  16. 如何在 Mac 上的 Pages 文稿中格式化文本栏?
  17. 从巨潮资讯网获取数据
  18. PCB硬件设计规范(详细版)
  19. 疫情下企业面临的关键网络安全建设,去繁从简,保住核心安全
  20. 大一Web课程设计:企业网站——HTML+CSS+JavaScript电子购物商城(37页面)

热门文章

  1. 打线上包 测试_vue-cli项目分别打测试包(test)和生产包(prod)
  2. import python file in currently folder
  3. 关于DX中纹理平移的一个小问题
  4. K-means 聚类算法的图像区域分割
  5. 【Python数据分析】数据预处理3——数据规约(含主成分分析详解、Python主要预处理函数)
  6. ubuntu终端安装python_Ubuntu linux下安装python3(手动安装)
  7. c语言国家二级培训机构,国家计算机二级C语言培训教案.doc
  8. linux命令大全文档,LINUX命令大全文档
  9. 蓝牙 查询码 android,android bluetooth UUID蓝牙查询表
  10. xp和win7右键新建选项排序