JavaScript之基础-16 JavaScript 原型与继承

一、JavaScript 原型

原型的概念

- 在JavaScript中,函数本身也是一个包含了方法和属性的对象

- 每个函数中都有一个prototype属性,该属性引用的就是原型对象

- 原型对象是保存共享属性值和共享方法的对象

为对象扩展属性

- 扩展单个对象的成员

- 扩展共享的属性值

- 内存图描述

删除属性

- 可以使用delete关键字删除对象的属性

自由属性与原型属性

- 自有属性:通过对象的引用添加的属性;其它对象可能无此属性;即使有,也是彼此独立的属性

emp1.job = ‘Coder‘;

- 原型属性:从原型对象中继承来的属性,一旦原型对象中属性值改变,所有继承自该原型的对象属性均改变

Emp.prototype.dept = ‘研发部‘;

- 自有属性重写原型属性

- 使用hasOwnProperty()检测对象是否具备指定自有属性:

  - 使用in检测对象及其原型链中是否具备指定属性:

对象的prototype属性

- 自定义对象的prototype属性

- new 创建的对象使用构造函数的 prototype 作为原型

- 对象直接量的原型为 Object.prototype

- 内置对象的prototype属性

- Array 对象

- Boolean 对象

- Date 对象

- Number 对象

- String 对象

获取原型

- 可通过两种方式获得对象的原型,进而设置共享属性

- 使用构造函数的prototype属性

比如: Emp.prototype

- 使用专门的getPrototypeOf方法

比如: Object.getPrototypeOf(obj)

- 例如:为两个Emp对象指定相同的部门属性值

原型链

- 其实,JavaScript中,原型对象本身也有原型

- 构造函数的原型对象中也有一个__proto__属性

- 原型对象中的__proto__属性,默认指向Object类型的原型对象----Object.prototype

- Object.prototype是所有对象的原型。其中包含了所有对象所共有的属性和方法。比如:toString方法

- 事实上,所有对象通过__proto__属性的引用关系,都可以直接或间接的引用到Object.prototype对象

- 我们将使用对象的__proto__属性,形成的逐级引用的关系,称为原型链

- 内存图描述

二、JavaScript 继承

继承的几种实现方式

- JavaScript中主要通过原型实现继承

- 通过原型实现继承主要有以下两种方式:

- 修改构造函数的原型,为该构造函数创建的对象指定统一的父级对象

语法: 构造函数.prototype = 父级对象;

- 单独修改一个对象的原型,而不影响其他对象的原型

语法: Object.setPrototypeOf(子类,父级对象);

如何实现继承

- 修改构造函数的原型,为该构造函数创建的对象指定统一的父级对象

- 注意:

- 凡修改原型后,用此构造函数创建的新对象,均引用新原型

- 修改原型之前,用此构造函数创建的对象,将无法使用新的原型,而依然使用旧的原型。因此被孤立

- 也可以修改单个对象的原型,而不影响其他对象的原型

- 仅影响当前对象的继承关系。不影响其它对象

检查对象的原型isPrototypeOf()

- isPrototypeOf()方法用于判定一个prototype对象是否存在于另一个对象的原型链中。如果是,返回true,否则返回false

只继承于原型

- 出于效率考虑,尽可能地将可重用的属性和方法添加到原型中去。

- 不要单独为继承关系创建新对象

- 尽量减少运行时方法搜素,例如toString()方法

继承于扩展

- JavaScript 是面向对象的语言,但与Java、C#等面向对象的语言不通,ECMAScript5中没有定义类(class)的语法,也不会通过类来创建对象

- JavaScript中的继承基于prototype,而不是是基于类

总结:本章内容主要介绍了 JavaScript 原型与继承

时间: 2024-10-03 22:47:22

JavaScript之基础-16 JavaScript 原型与继承的相关文章

JavaScript之基础-6 JavaScript 分支结构 (if、if-else、else if、switch-case)

一.流程控制概述 程序的流程控制 - 程序 = 数据 + 算法 - 任何复杂的程序算法都可以通过"顺序","分支","循环"三种基本的程序逻辑组合实现 分支结构的概述 - 程序可以在运行过程中,在不同的情形下有选择的执行某些语句 二.if 语句 if 语句的执行逻辑 if 语句流程图 - if判定中默认必需一个boolean值 - 若出现的值不是boolean类型,则会自动转换 if 语句块不要省略"{}" 三.if-else

JavaScript之基础-1 JavaScript(概述、基础语法)

一.JavaScript 概述 JavaScript 概念 - JavaScript 是一种运行于 JavaScript解释器/引擎中的解释型脚本语言 - JavaScript 解释器作为JS脚本的运行环境,有如下两种呈现方式 - 独立安装的 JavaScript 解释器; - 嵌入在浏览器内核中的 JavaScript 解释器; - 目前 PC .平板.手机.机顶盒中安装的主要浏览器全部支持JavaScript JavaScript 发展史 - 1992年,Nombas公司为自己的CEnvi软

JavaScript的几种(原型)继承

定义Foo,Bar 其中,Bar继承Foo a是Bar的实例,包含有Foo和Bar的函数和属性: function Foo(name) { this.name = name; } Foo.prototype.myName = function() { return this.name; }; function Bar(name,label) { Foo.call( this, name ); this.label = label; } // here, we make a new `Bar.pr

JavaScript之基础-15 JavaScript OOP(概述、对象模板)

一.JavaScript OOP 概述 OOP 概述 - 面向对象的语言 - 封装 - 把相关的信息(无论数据或方法)存储在对象中 - 继承 - 从其它对象获得属性和方法 - 多态 - 能以多种不同的形式运行函数或方法 - ECMAScript支持这些要求,因此可被是看做面向对象的 封装 - 回顾直接量创建对象 - 使用new调用Object构造函数创建对象语法 继承 - 对象方法 - toString() - toLocaleString() - valueOf() 二.JavaScript

JavaScript之基础-3 JavaScript 数据类型、数据类型转换

一.数据类型 数据类型 基本类型 - 数字类型 - 既可以表示32位整数,也可以表示64位的浮点数 - 整数 - 十进制:逢十进一的整数,如1234567890 - 八进制:逢八进一的整数,如01235670 - 十六进制: - 浮点数 - 使用小数点记录数据,如 95.5,3.1415926 - 使用指数记录数据,如 4.3e23, 4.3E-23 string 类型 - 字符串类型 - 表示一系列的文本字符数据,如性别.姓名.住址等 - 由Unicode字符,数字,标点组成的序列 - Jav

JavaScript之基础-4 JavaScript 运算符、表达式

一.JavaScript 运算符 运算符 - 算数运算        + - * / % ++ -- - 关系运算        > < >= <= == === != !== - 逻辑运算        && || ! - 位运算          & | ~ ^ << >> >>> - 赋值运算        = += -= *= /= %= - 字符连接运算    + - 条件(三目)运算  ?: - 特殊运算

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)

一.JavaScript 正则表达式概述 正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的,用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索.匹配或替换特定形式的文本.如:词语出现频率统计.验证字符串是否符合邮件格式.屏蔽一篇帖子中的限制性词语等 正则表达式初体验 - 验证用户输入的手机格式是否合法 二.JavaScript 定义正则表达式 普通字符 - 所有的单个大小写字母.数字都是一个正则表达式,用以匹配单个字符

JavaScript之基础-11 JavaScript 包装类对象(Math、Date、Number、Boolean)

一.JavaScript Math对象 Math对象概述 - Math 对象是ECMAScript提供的一个全局对象,它主要封装了一些常用的数学函数和常数 - Math 对象没有构造函数,无法创建它的实例(instance);调用其属性和方法时,直接使用Math对象名即可 Math对象的属性 - Math 对象具有如下成员属性 Math对象的方法 - Math 对象具有如下成员方法 三角函数 - Math 对象提供了常用的三角函数计算方法 随机数 - Math 对象提供了一个生成随机数的函数 二

JavaScript之基础-12 JavaScript 错误处理

一.JavaScript 错误处理 错误处理概述 - 错误,指程序中的非正常运行状态,在其它编程语言中称为"异常"或"错误".解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息 - ECMAScript定义了六种类型的错误(EvalError,RangeError,REferenceError,SyntaxError,TypeError,URIError).除此之外,还可以使用Error构造方法创建自定义的Error对象,并使用throw语句