1.js的继承的实现方法

原文摘自:https://www.cnblogs.com/gwf93/p/10384352.html

先写一个父类Car

function Car(name){
    this.name = name;
    this.driver = function (){
        console.log(‘日行千里‘)
    }
}
Car.prototype.addOil = function(param){
    this.oil = param;
   console.log(this.name + ‘每天加油‘ + param + ‘L‘)
}

(一)原型链继承:

   核心: 将父类的实例作为子类的原型

instanceOf:测试一个对象是否为一个类的实例

// 原型继承
function BaoMa() {
}
BaoMa.prototype = new Car() //父类的实例作为子类的原型,继承的关键
BaoMa.prototype.name = "宝马"

var baoMa1 = new BaoMa();  //  子类的实例化
console.log(baoMa1.name)
console.log(baoMa1.addOil(20))
console.log(baoMa1.driver())
console.log(baoMa1 instanceof Car)  // true
console.log(baoMa1 instanceof Car) // true
  1. 特点:

    1. 纯粹的继承关系,实例是子类的实例,也是父类的实例
    2. 父类新增原型方法/原型属性,子类都能访问到
    3. 简单,易于实现

    缺点:

    1. 可以在Cat构造函数中,为Cat实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行。
    2. 无法实现多继承
    3. 来自原型对象的所有属性被所有实例共享
    4. 创建子类实例时,无法向父类构造函数传参

(二)构造函数继承:

// 构造继承
function DaZhong(name){
    Car.call(this);
    this.name = name || ‘迈腾‘;
}
let maiTeng = new DaZhong();
console.log(maiTeng.name) // 迈腾
console.log(maiTeng.driver())
console.log(maiTeng instanceof Car); // false
console.log(maiTeng instanceof DaZhong) // true

特点:

  1. 解决了1中,子类实例共享父类引用属性的问题
  2. 创建子类实例时,可以向父类传递参数
  3. 可以实现多继承(call多个父类对象)

缺点:

  1. 实例并不是父类的实例,只是子类的实例
  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

(三) class 继承

在 ES6 中,我们可以使用 class 去实现继承,并且实现起来很简单

核心: 使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super,这段代码可以看成 Animal.call(this, name)

    class的本质就是函数

class DaZhong extends Car {
    constructor(name){
    super(name);
       this.name= ame || ‘迈腾‘;
    }
}
let maiTeng = new DaZhong();
console.log(maiTeng.name) // 迈腾
console.log(maiTeng.addOil(30))  // 迈腾每天加油30L
console.log(maiTeng.driver())
console.log(maiTeng instanceof Car); //true
console.log(maiTeng instanceof DaZhong) // true

原文地址:https://www.cnblogs.com/linjiu0505/p/11847815.html

时间: 2024-10-17 05:21:12

1.js的继承的实现方法的相关文章

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

js的call()和apply()方法的学习

1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])

JS中 call() 与apply 方法

1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])

js中的子类继承父类的方法和属性

上次讲了个简单的继承,这次 咱们讲个稍微复杂点的,那就是让子类继承父类的属性和方法,假设人 (Person)是父类,工人(Worker)是子类,让worker继承person的属性和方法: 父类: function Person(name,age) { this.name=name; this.age=age; } Person.prototype.showName=function() { alert(this.name); } function worker(name,age,job) {

Js实现继承的方法

原型的作用:1.将公共部分放入原型中,这样构造出的多个实例对象的公共部分只会占用一个公共空间,实现数据共享和节省内存空间 2.通过原型实现继承:构造函数模拟 "类"这个面向对象的概念,JS基于对象,基于构造函数的原型对象实现继承 如何实现继承?1.改变原型对象的指向:将子类构造函数(B)的prototype指向父类构造函数(A)的一个实例化对象(a),那么这个子类构造函数构造出的实例化对象(b)就可以访问父类(A)的属性和方法 缺陷:由于B的prototype改变,那么保存在原来的B的

js的继承

js要实现继承有很多方法,个人总结大致分为三种: function people(){ this.specials = "人类"; } function p1(name){ this.name = name; } 一.使用call和apply 将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行 function p1(name){ people.apply(this,arguments);//在这里利用call和apply替换当前的调用对象 this.name = name;

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

JS中的对象和方法简单剖析

众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): Dates ,Maths,Regexps,Arrays,Funcitons,当然Objects,这些都是对象: JS中,所有值,除了原生值,都是对象:这些原生值包括:strings,numbers('3.14'),true,false,null和undefined 对象是包含变量的变量,js变量可

[技术学习]js接口继承

js是面向对象语言,但是js又缺乏了面向对象的诸多特性,比如继承,没有接口继承也没有父类继承,因此有时候需要人工来实现继承. 一.首先看下java中面向对象的继承: //定义类鸟类的飞行动作 interface BirdFlyable { public void fly(); } //鸟类 class Bird implements BirdFlyable{ public void fly(){ System.out.println("bird is flying"); } } //蝙