构造函数继承

1、子类通过apply方法或者call方法把this指向父类

js代码

        function Parent(name, age) {
this.name = name
this.age = age
}
Parent.prototype.init = function(){
console.log(this.name, this.age)
}
function Son(name, age) {
Parent.apply(this, [name, age]) //子类通过apply方法或者call方法把this指向父类
}

这种方法继承了父类的属性,然而并没有继承父类原型上方法

2、把父类实例对象赋值给子类原型

js代码

        function Parent(name, age) {
this.name = name
this.age = age
}
Parent.prototype.init = function(){
console.log(this.name, this.age)
}
function Son(name, age) { }
Son.prototype = new Parent() //把父类实例对象赋值给子类原型
Son.prototype.constructor = Son //严谨起见,不写也不会影响效果

这虽然继承了父类原型方法,但是却没有继承父类属性

把1、2这两者综合一下就是构造函数的组合继承了,这样就实现了继承父类的方法和属性

js代码

        function Parent(name, age) {
this.name = name
this.age = age
}
Parent.prototype.init = function(){
console.log(this.name, this.age)
}
function Son(name, age) {
Parent.call(this,name,age) //子类通过apply方法或者call方法把this指向父类
}
Son.prototype = new Parent() //把父类实例对象赋值给子类原型
Son.prototype.constructor = Son //严谨起见,不写也不会影响效果

组合继承:缺点,实现继承的过程中调用了两次父类实例

class继承

1、通过extends关键字继承父类原型方法,super方法继承父类属性,

js代码

        class Parent{
constructor(name,age) {
this.name = name
this.age = age
}
init(){
console.log(this.name,this.age)
}
}
class Son extends Parent{ //extends关键字继承父类原型方法
constructor(name,age) {
super(name,age) //super方法继承父类属性
}
}
new Son('张三',18).init()

构造函数继承与class继承的更多相关文章

  1. javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  2. C++在单继承、多继承、虚继承时,构造函数、复制构造函数、赋值操作符、析构函数的执行顺序和执行内容

    一.本文目的与说明 1. 本文目的:理清在各种继承时,构造函数.复制构造函数.赋值操作符.析构函数的执行顺序和执行内容. 2. 说明:虽然复制构造函数属于构造函数的一种,有共同的地方,但是也具有一定的 ...

  3. 第32节:Java中-构造函数,静态方法,继承,封装,多态,包

    构造函数实例 class Cat{ // 设置私有的属性 name private String name; // 设置name的方法 public void setName(String Name) ...

  4. 深入浅出javascript(十二)继承——构造函数继承和组合继承

    #题记: 有一水果类,抽象出属性包括:name(水果品种),price(价格),id(ID号).现有两个子类,分别为苹果,桔子,希望继承水果父类. 一.构造函数继承 构造函数继承相当把父类的属性在子类 ...

  5. JS原型、原型链、构造函数、实例与继承

    https://cloud.tencent.com/developer/article/1408283 https://cloud.tencent.com/developer/article/1195 ...

  6. java中继承,子类是否继承父类的构造函数

    java中继承,子类是否继承父类的构造函数 java继承中子类是不会继承父类的构造函数的,只是必须调用(隐式或者显式) 下面来看例子: public class TestExtends { publi ...

  7. JS继承之原型继承

     许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支 ...

  8. Lua面向对象----类、继承、多继承、单例的实现

    (本文转载)学习之用,侵权立删! 原文地址   http://blog.csdn.net/y_23k_bug/article/details/19965877?utm_source=tuicool&a ...

  9. C++对象模型:单继承,多继承,虚继承

    什么是对象模型 有两个概念可以解释C++对象模型: 语言中直接支持面向对象程序设计的部分.对于各种支持的底层实现机制. 类中成员分类 数据成员分为静态和非静态,成员函数有静态非静态以及虚函数 clas ...

  10. C++ 多继承和虚继承的内存布局(转)

    转自:http://www.oschina.net/translate/cpp-virtual-inheritance 警告. 本文有点技术难度,需要读者了解C++和一些汇编语言知识. 在本文中,我们 ...

随机推荐

  1. Java 中的过滤器Filter 和拦截器 Interceptor

    1.先说拦截器 Interceptor 本项目以springboot为例: 新建 InterceptorConfig package com.opendev.mystudy.MyInterceptor ...

  2. 数独c++

    #include <bits/stdc++.h> using namespace std; const int maxn = 10; bool maps[maxn][maxn], row[ ...

  3. flask之CORS跨域请求处理

    from flask import Flask from flask_cors import CORS#pip install Flask-CORS#跨域请求模块 app = Flask(__name ...

  4. mysql小白系列_02 mysql源码安装标准化

    问题: 1.为什么数据目录和日志目录需要分开? 2.如何标准化配置多实例?(例如:一台物理主机上部署3306与3307两个实例) 3.详细描述MySQL编译安装的过程(截图安装步骤) 1.为什么数据目 ...

  5. poj3376 KMP+字典树求回文串数量(n*n)

    Finding Palindromes Time Limit: 10000MS   Memory Limit: 262144K Total Submissions: 4043   Accepted: ...

  6. bzoj1497最大闭权图基础题

    1497: [NOI2006]最大获利 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 5485  Solved: 2661[Submit][Status] ...

  7. Web Scraper——轻量数据爬取利器

    日常学习工作中,我们多多少少都会遇到一些数据爬取的需求,比如说写论文时要收集相关课题下的论文列表,运营活动时收集用户评价,竞品分析时收集友商数据. 当我们着手准备收集数据时,面对低效的复制黏贴工作,一 ...

  8. ExtJS动态改变字体颜色

    为按钮设置文本属性,用标签包裹变色. //pButton为按钮IDExt.getCmp('pButton').setText('<span style="color:#FF0000;& ...

  9. vue端口号被占用

    今天在启动一个Vue项目的时候,遇到了一个问题. 得知是Vue项目端口号占用的问题.   解决方法: 换一个端口号. 在调用  npm run dev 的时候,实际上是在调用根目录下的 package ...

  10. NO.5 CCS运行demo(云端)

    我们在demo的README中发现如果程序在云端运行会有很酷的界面而且功能会多一些. 首先我们在CCS开始界面点击Resourse Explorer 然后在浏览器中找到对应的demo 打开GUI界面, ...