Javascript:继承和原型链
JavaScript继承 原型
2023-09-14 08:57:15 时间
JavaScript对象可看作是动态地装载属性(这里指自有属性)的”包包”,并且每个对象都有一个链指向一个原型对象。如下即为当尝试访问一个属性时发生的事情:
【JavaScript】26_面向对象——继承 # 8、继承 - 可以通过extends关键来完成继承 时,就相当于将另一个类中的代码复制到了当前类中(简单理解) - 继承发生时,被继承的类称为 父类(超类),继承的类称为 子类 的代码,并且可以在不修改一个类的前提对其进行扩展 封装 安全性 继承 扩展性 多态 灵活性 ```html script class Animal{ constructor(name){ this.n
JS 的继承 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个原型对象的指针(constructor)并指向原想对象。 继承的本质就是复制,即重写原型对象,代之以一个新类型的实例 JS的继承给我独特的印象是, 在java中,继承是复制父类的一份给自己,即使自己把复制过来的东西弄坏了,也不会影响到父类那边的 而js中是通过原型继承,自己弄坏(修改)的,会直接影响到父类本身的东西
// 假设有个对象o,其原型链如下所示: // {a: 1, b: 2} --- {b: 3, c: 4} --- null // a和b是o的自有属性。 // 本例中,someObject.[[Prototype]]指定someObject的原型。 // 这完全是一种标记符号(基于ECMAScript标准中所使用的),不可用于脚本中。 console.log(o.a); // 1 // o有一个自有属性a吗?是的,其值为1 console.log(o.b); // 2 // o有自有属性b吗?是的,其值为2 // o的原型也有一个属性b,但是这里不会被访问。这被称为“属性隐藏”(property shadowing) console.log(o.c); // 4 // o有自有属性c吗?没有,检查它的原型 // o.[[Prototype]]有自有属性c吗?是的,其值为4。 console.log(o.d); // undefined // o有自有属性d吗?没有,检查其原型 // o.[[Prototype]]有自有属性d吗?没有,检查其原型 // o.[[Prototype]].[[Prototype]]为null,停止搜索,没有找到属性,返回undefined。将一个属性分配给一个对象会创建一个自有属性。对于获取和设置属性的行为规则,唯一的例外是当一个继承而来的属性带有一个属性值获取器或设置器。 继承”方法” JavaScript没有以基于类的编程语言定义方法的形式出现的”方法”。JavaScript中,任何函数都可以作为一个属性被添加到一个对象。一个继承而来的函数,操作起来与任何其他属性相同,包括如上所示的属性隐藏(在这里,称为方法覆盖)。 当执行一个继承而来的函数时,this的值指向继承对象,而不是原型对象,该函数是原型对象的自有属性。
var o = { a: 2, m: function(b) { return this.a + 1; console.log(o.m()); // 3 // 这里当调用o.m时,this引用o var p = Object.create(o); // p是一个继承自o的对象 p.a = 12; // 为p创建一个自有属性a console.log(p.m()); // 13 // 这里调用p.m时,this引用p // 因此,当p继承了o的函数m,this.a意味着p.a,p的自有属性a ##`创建对象的不同方式,以及由此产生的原型链`以语法结构创建对象
var o = {a: 1}; // 新创建的对象o有Object.prototype作为其[[Prototype]] // o没有名为hasOwnProperty的自有属性 // hasOwnProperty是Object.prototype的自有属性。因此o从Object.prototype继承了hasOwnProperty // Object.prototype以null为其prototype。 // o --- Object.prototype --- null var a = ["yo", "whadup", "?"]; // 数组继承自Array.prototype(它具有indexOf, forEach等方法)。 // 该原型链如下所示: // a --- Array.prototype --- Object.prototype --- null function f() { return 2; // 函数继承自Function.prototype(它具有call,bind等方法): // f --- Function.prototype --- Object.prototype --- null ###使用构造器JavaScript中,”构造器””就”是一个恰好以new操作符调用的函数。
function Graph() { this.vertexes = []; this.edges = []; Graph.prototype = { addVertex: function(v) { this.vertexes.push(v); var g = new Graph(); // g是一个带有自有属性vertexes和edges的对象。 // 执行new Graph()后,g.[[Prototype]]是Graph.prototype的值。 使用Object.createECMAScript 5引入了一个新方法:Object.create。调用这个方法会创建一个新对象。这个对象的原型是该函数的第一个参数:
var a = {a: 1}; // a --- Object.prototype --- null var b = Object.create(a); // b --- a --- Object.prototype --- null console.log(b.a); // 1 (继承而来) var c = Object.create(b); // c --- b --- a --- Object.prototype --- null var d = Object.create(null); // d --- null console.log(d.hasOwnProperty); // undefined,因为d并不继承自Object.prototype
【JavaScript】26_面向对象——继承 # 8、继承 - 可以通过extends关键来完成继承 时,就相当于将另一个类中的代码复制到了当前类中(简单理解) - 继承发生时,被继承的类称为 父类(超类),继承的类称为 子类 的代码,并且可以在不修改一个类的前提对其进行扩展 封装 安全性 继承 扩展性 多态 灵活性 ```html script class Animal{ constructor(name){ this.n
JS 的继承 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个原型对象的指针(constructor)并指向原想对象。 继承的本质就是复制,即重写原型对象,代之以一个新类型的实例 JS的继承给我独特的印象是, 在java中,继承是复制父类的一份给自己,即使自己把复制过来的东西弄坏了,也不会影响到父类那边的 而js中是通过原型继承,自己弄坏(修改)的,会直接影响到父类本身的东西
相关文章
- JavaScript与有限状态机
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Broadcaster + Operator + Listener pattern -- 9. Create modify, filter, map operators
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript Crocks] Make your own functions safer by lifting them into a Maybe context
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Proper use of console.assert in JavaScript
- 详述JavaScript实现继承的几种方式
- 用JavaScript,获取Table中指定的行、列
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] JavaScript Array Methods in Depth - push
- javascript: 自定义鼠标拖动的滑块slider(chrome 105.0.5195.125)
- ArcGIS api for javascript——加载查询结果,悬停显示信息窗口
- JavaScript 函数 window.matchMedia 的用途
- TypeScript里的interface扩展,多继承以及对应的JavaScript代码
- Atitit.实现继承的原理and方法java javascript .net c# php ...
- Atitit.实现继承的原理and方法java javascript .net c# php ...
- 从零开始学_JavaScript_系列(24)——查看对象属性,合并数组
- JavaScript基础语法(流程控制语句)
- 【华为OD机试 2023】完美走位(C++ Java JavaScript Python)
- Effective JavaScript Item 35 使用闭包来保存私有数据
- JavaScript--函数
- web前端Javascript开发学习之JavaScript中的预编译如何进行
- JavaScript继承详解
- Fix:VectorDraw web library (javascript):10.1
- 对 typescript 的理解?与 javascript 的区别?