js原生继承几种方式

js原生继承

js本身并没有继承和类的概念，本质上是通过原型链(prototype)的形式实现的。

1.先写两个构造函数Parent和Child，用于将Child继承Parent

function Parent() {this.animals = 'animals';this.show = function() {console.log(this.animals);}
}
Parent.prototype.pro = 'pro';
function Child() {this.dog = 'dog';
}

2.prototype继承

// 这样直接将Parent.prototype赋给Child.prototype的继承方式不可取，因为在改变Child.prototype里的属性会同时改变Parent.prototype
Child.prototype = Parent.prototype; // 不能访问构造函数属性，只能访问原型// Object.create(Parent.prototype)构造的对象是一个空对象且它的原型指向Parent.prototype，所以这里的Student.prototype是空对象，链接到了Parent.prototype，并不会影响到Parent.prototype
Child.prototype = Object.create(Parent.prototype); // 不能访问构造函数属性，只能访问原型// 这种继承方式是将实例化后的Parent对象赋给Child的prototype，既可以访问Parent构造函数里边的属性，也可以访问原型属性
Child.prototype = new Parent();// 以上任一操作完成后这一步必须操作，是将Child的构造函数指向自身，否则在执行完继承之后，实例化的对象构造函数是Parent
Child.prototype.constructor = Child;

3.call，apply构造函数继承

// 需要将Child改写如下，apply类似，但缺陷就是访问不到Parent.prototype的属性了
function Child() {Parent.call(this);this.dog = 'dog';
}

综上，可以根据自己的实际需求去选择合适的继承方式。

转载于:https://www.cnblogs.com/ljwk/p/11477303.html

js原生继承几种方式相关推荐

JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...
iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
js 函数定义三种方式
Js 函数定义的三种方式: 方式一:function <script type="te ...
python 调用js类_Python 调用 JS 常用的4种方式，带你学会如何解密
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理以下文章来源于AirPython ,作者星安果 1. 前言日常 Web 端爬虫过 ...
JS绑定事件三种方式
三种方式 1.在DOM中直接绑定 2.在JS代码中直接绑定 3.使用事件监听函数绑定事件一.在DOM中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子 ...
JS 下载文件两种方式总结
后端返回Blob对象(文件流),完成导出.下载功能: 1.介绍Blob Blob Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 Reada ...
以太坊智能合约交互调用，web3.js，web3j两种方式实现
导语接上篇文章 <使用hardhat部署solidity智能合约到测试网> 部署完合约之后,那么如何区块链进行交互呢?这节的主要内容就是使用web3.js和web3j来与区块链以及链上的 ...

js原生继承几种方式

js原生继承

js原生继承几种方式相关推荐

最新文章

热门文章