【一分钟JavaScript】实现继承

小咪咪 2022-01-12 02:43 219阅读 0赞

## 构造函数实现继续 ##

function Parent(){
    	this.name='parent';
    }
    Parent.prototype.say=function(){
    	console.log(`I amd ${name}`)
    }
    function Child(){
    	Parent.call(this);
    	this.type='child';
    }
    var c=new Child();//Child {name: "parent", type: "child"}
    c.say();//Uncaught TypeError: c.say is not a function
    复制代码

使用call改变this指向，调用 Parent，此时Parent指向Child。 只能继承父类的实例属性和方法，而不能继续原型属性/方法。

## 使用原型 ##

function Parent(){
    	this.name='parent';	
    	this.items=[1,2,3];
    }
    function Child(){
    	this.type='Child';
    }
    Child.prototype=new Parent();
    var c1=new Child();
    var c2=new Child();
    c1.name='child';
    console.log(c2.name);//parent
    c1.items.push(4);
    console.log(c2.items);//[1,2,3,4]
    复制代码

由于c1和c2和\_\_proto\_\_均指向同一个Parent.prototype，造成c1.items更改时，c2.items也被修改了。

## 组合方式 ##

吸引上面的经验，那么就是结合两个方法实现继承

function Parent(){
    	this.name='parent';	
    	this.items=[1,2,3];
    }
    Parent.prototype.say=function(){
    	console.log(`I am ${name}`);
    }
    function Child(){
    	Parent.call(this);
    	this.type='Child';
    }
    Child.prototype=new Parent();
    var c1=new Child();
    var c2=new Child();
    c1.name='child';
    console.log(c2.name);//parent
    c1.items.push(4);
    console.log(c2.items);//[1,2,3]
    复制代码

转载于:https://juejin.im/post/5d01e10ee51d455cd73ba078

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现继承大全

复习一下js 的继承相关的知识~~ js的继承：许多面向对象语言都支持两种继承方式，接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实现的方法

青旅半醒/ 2023年07月10日 08:07/ 0 赞/ 4 阅读

相关实现JavaScript继承

[66套java从入门到精通实战课程分享][66_java] 使用TypeScript或者ES2015+标准中的`extends`关键字是很容易实现继承的，但这不是本文的重点

柔光的暖阳◎/ 2022年12月31日 14:21/ 0 赞/ 107 阅读

相关 javascript继承的实现方式

随便写写，具体的就不再做过多啰嗦了 1、原型(Prototype)，建议自己研究[原型与闭包][Link 1] var Person = function(){

谁借莪１个温暖的怀抱￠/ 2022年08月06日 07:14/ 0 赞/ 191 阅读

相关 javascript之继承详解（一）

面向对象与基于对象面向对象有两个重要的概念，类和实例，类是对一类事物行为和方法的描述，实例则是实现。面向对象编程还有三个重要概念：封装，继承，多态，简单说明

今天药忘吃喽~/ 2022年07月13日 10:52/ 0 赞/ 392 阅读

相关 JavaScript如何优雅实现继承？

一、对象冒充其原理如下：构造函数使用 this 关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使 Parent 构造函数成为

以你之姓@/ 2022年04月13日 04:45/ 0 赞/ 267 阅读

相关 JS实现继承 JavaScript

JS实现继承 JavaScript 定义一个父类： // 定义一个动物类 function Animal (name) { // 属性

太过爱你忘了你带给我的痛/ 2022年03月25日 03:11/ 0 赞/ 248 阅读

相关 javascript实现继承

//约定:下面将展开一个有点长的故事，所以有必要提前约定共同语言： / 约定 / function Fun(){ // 私有属性

深藏阁楼爱情的钟/ 2022年03月18日 14:56/ 0 赞/ 216 阅读

相关【一分钟JavaScript】async和 await

在上一节已经讲了Generator函数([juejin.im/post/5cff72…][juejin.im_post_5cff72])，如果没有认真读，请再次打开看一下。

超、凢脫俗/ 2022年01月12日 02:45/ 0 赞/ 186 阅读

相关【一分钟JavaScript】实现继承

构造函数实现继续 function Parent(){ this.name='parent'; } Parent.prototype.s

小咪咪/ 2022年01月12日 02:43/ 0 赞/ 220 阅读

相关 JavaScript里继承的实现

真正的面向对象语言必须支持继承机制，即一个类能够重用（继承）另一个类的方法和属性，在上一篇文章里介绍了 [javascript 里的类实现][javascript] ，这里介绍

比眉伴天荒/ 2021年12月17日 05:29/ 0 赞/ 247 阅读