ES5常用的组合继承及原型链理解

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES5常用的组合继承及原型链理解</title>
</head><body></body>
<script>// ES5常用的组合继承// 父类构造方法function Parent(name) {this.name = name;this.nums = [1, 2, 3, 4]}Parent.prototype.log_Parent = function () {console.log('parent姓名:' + this.name);}// 子类构造方法function Child(name, age) {Parent.call(this, name);//继承关键1:子类的构造方法沿用父类的构造方法this.age = age;}Child.prototype = new Parent();//继承关键2:子类的构造函数原型用父类的一个实例赋值Child.prototype.log_Child = function () {console.log('Child姓名:' + this.name);console.log('Child年龄:' + this.age);}// 声明子类实例let c2 = new Child('小红', 20);// 原型链console.log('--------------- 原型链 ---------------');console.log(Child);//Child构造函数console.log(Child.prototype);//Child构造函数生成的原型对象console.log(Child.prototype.constructor);//Child构造函数生成的原型对象访问构造函数let c1 = new Child('Child类的一个实例', 1);//如果继承Parent类则也是Parent类的一个实例console.log('----- Child类的一个实例，一直点__proto__属性看看 -----');console.log(c1);//Child类的一个实例,实例调用一个方法(或属性),若实例成员中没有,浏览器会自动访问__proto__对象,若没有找到还会再访问__proto__对象里面的__proto__对象直到找到此方法后执行并结束查找或一直到达最顶层的null也没有找到此方法同样结束自动查找调用，这是浏览器对ES5原型链支撑的一个重要的机制console.log(c1.__proto__);//c1访问Child原型，默认等于Child.prototype,由于继承父类一般又被赋值为new Parent()console.log(c1.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型console.log(c1.__proto__.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型再访问祖先Object原型console.log(c1.__proto__.__proto__.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型再访问祖先Object原型然后就只有null了console.log(new Parent('Parent类的一个实例'));//父类的实例，赋值给Child.prototype，自然会与c1.__proto__相同console.log(Parent.prototype);//父类的原型console.log(Parent.prototype.constructor);//父类原型的构造函数console.log('--------------- ---------------');c1.log_Child();//Child姓名:Child类的一个实例  Child年龄:1c2.log_Parent();//parent姓名:小红console.log(c1.age); // 1console.log(c2.age); // 20 c1.nums.push(9);// [1,2,3,4,9]console.log(c1.nums);  // [1,2,3,4,9]console.log(c2.nums); // [1,2,3,4]  复合型数据有独立空间，未被其它实例干扰console.log(c1 instanceof Child); // trueconsole.log(c1 instanceof Parent); // true c1既是Parent的实例，也是Child的实例</script></html>

@沉木

ES5常用的组合继承及原型链理解相关推荐

JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
一篇JavaScript技术栈带你了解继承和原型链
作者 | Jeskson 来源 | 达达前端小酒馆 1 在学习JavaScript中,我们知道它是一种灵活的语言,具有面向对象,函数式风格的编程模式,面向对象具有两点要记住,三大特性,六大原则. 那么 ...
JavaScript之继承（原型链）
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
JavaScript 设计模式学习第五篇－继承与原型链
JavaScript 是一种灵活的语言,兼容并包含面向对象风格.函数式风格等编程风格.我们知道面向对象风格有三大特性和六大原则,三大特性是封装.继承.多态,六大原则是单一职责原则(SRP).开放封闭原 ...
JS中的继承与原型链
对于原型我们通过[[prototype]].proto 以及 prototype 这三个概念理解其实现继承的思路. [[prototype]] 在 ECMAScript 标准中规定每个对象都有一个内置 ...
深入理解 js 之继承与原型链
原型链与继承当谈到继承时,JavaScript 只有一种结构:对象.每个实例对象(object )都有一个私有属性(称之为proto)指向它的原型对象(prototype).该原型对象也有一个自己的 ...
前端开发之闭包、继承、原型链
闭包.原型链和继承闭包闭包的概念官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 闭包是指有权访问另一个函数作用域中的变量 ...
浅谈JavaScript继承与原型链
对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...

ES5常用的组合继承及原型链理解

ES5常用的组合继承及原型链理解

@沉木

ES5常用的组合继承及原型链理解相关推荐

最新文章

热门文章