javascript 中对象的继承〔转贴〕

以下是javascript中对象的继承攻略:

1. 继承的概念

在Javascript中,可以通过继承的方式来实现代码的复用性。继承是一种以已有类(或对象)为基础,创建新类(或对象)的技术,新创建的类或对象具有已有类(或对象)的属性和行为。

2. 原型链继承

原型链继承是Javascript中最基础的继承方式,它的原理就是通过让一个构造函数的原型指向另一个构造函数的实例来实现继承。

下面是一个通过原型链继承实现的示例:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayName = function() {
    console.log("My name is " + this.name);
}

function Student(name, age, score) {
    this.score = score;
}

Student.prototype = new Person();

var tom = new Student("Tom", 18, 90);
tom.sayName(); // 输出 "My name is Tom"

在上面的例子中,我们定义了两个构造函数:PersonStudentPerson表示人员基类,拥有nameage两个属性,以及sayName方法。StudentPerson的子类,同时拥有score属性,通过原型链从Person中继承了属性和方法。其中,通过将Student.prototype指向一个Person实例来实现继承。

3. 借用构造函数继承

借用构造函数继承又称为经典继承,它的实现原理是在子类构造函数中调用父类构造函数,通过callapply方法改变上下文,从而实现属性的继承。

下面是一个通过借用构造函数继承实现的示例:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Student(name, age, score) {
    Person.call(this, name, age);
    this.score = score;
}

var tom = new Student("Tom", 18, 90);
console.log(tom.name); // 输出 "Tom"
console.log(tom.age);  // 输出 18
console.log(tom.score);// 输出 90

在上面的例子中,我们同样定义了PersonStudent这两个构造函数,但是在Student中调用了Person的构造函数,并且将this指向了当前的Student实例,这样就实现了属性的继承。

总结

在Javascript中,继承是实现代码复用的重要方法,可以通过原型链继承和借用构造函数继承两种方式来实现。其中,原型链继承适合通过实例方法和原型属性实现继承,而借用构造函数继承适合通过实例属性和方法实现继承。我们可以根据具体的情况选择不同的继承方式来实现代码的复用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 中对象的继承〔转贴〕 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS获取并操作iframe中元素的方法

    JS获取并操作iframe中元素的方法可以分为以下几个步骤: 通过document.getElementById()获取iframe元素的引用。例如,若iframe元素的id为“myFrame”,则用下列代码获取它的引用: var myFrame = document.getElementById(‘myFrame’); 使用contentWindow属性获…

    JavaScript 2023年6月10日
    00
  • SVG动画vivus.js库使用小结(实例代码)

    下面是一份详细的攻略,包含vivus.js库的使用方法及实例代码: 介绍 Vivus.js库是一个轻量级的javascript库,可以创建美观的SVG描边动画效果。它支持很多动态效果,例如从头开始显示、流线显示、延迟显示等等。 安装 首先,在你的html文档中引入vivus.js文件: <script src="vivus.js"&…

    JavaScript 2023年6月11日
    00
  • JavaScript版DateAdd和DateDiff函数代码

    下面是详细讲解“JavaScript版DateAdd和DateDiff函数代码”的完整攻略: 一、概述 在Web开发中,常常需要对日期进行操作。但是JavaScript原生的Date对象提供的方法较少,因此我们可以自己编写DateAdd和DateDiff函数来方便地进行日期计算。 DateAdd函数用于计算某个日期加上一定时间单位后的日期值,而DateDif…

    JavaScript 2023年5月27日
    00
  • 使用JS判断页面是首次被加载还是刷新

    使用JS判断页面是首次被加载还是刷新,可以使用sessionStorage来进行判断,具体方法如下: 监听load事件,在事件处理函数中,判断sessionStorage是否存在对应的键值对。如果存在,说明页面是刷新后再次加载,反之则是首次加载。 示例代码: window.addEventListener(‘load’, function() { var i…

    JavaScript 2023年6月11日
    00
  • 关于javascript中的parseInt使用技巧

    下面就是关于JavaScript中parseInt使用技巧的攻略。 什么是parseInt? parseInt()是JavaScript中的内置方法,可用于将字符串转换为整数。 parseInt方法签名 parseInt(string, radix) 参数说明: string :必需,要被解析的字符串。 radix :可选,表示要解析的数字是几进制的数,范围…

    JavaScript 2023年6月10日
    00
  • js+css实现卡片轮播图效果

    下面是“js+css实现卡片轮播图效果”的完整攻略。 1. 概述 卡片轮播图指的是一种类似于滑动门的效果,即多个内容块轮流展示在同一个位置上的效果。在实现卡片轮播图的过程中,我们需要用到HTML、CSS、JS三种语言。 2. HTML 首先,我们需要在HTML中定义卡片轮播图的容器。 <div class="carousel"&gt…

    JavaScript 2023年6月11日
    00
  • JavaScript的三种BOM对象

    当我们使用JavaScript编写网页时,页面中除了DOM对象,还有BOM对象,BOM是指浏览器对象模型,它提供了许多与浏览器交互的对象和方法。JavaScript中BOM对象可分为三类:窗口对象、导航对象和屏幕对象。下面就分别来详细讲解这三种BOM对象: 窗口对象 窗口对象是BOM中最常用的对象,它代表整个浏览器窗口或选项卡。窗口对象是通过window对象…

    JavaScript 2023年5月27日
    00
  • JS使用post提交的两种方式

    JS使用post提交的两种方式: 方式一:通过XMLHttpRequest对象进行post提交 步骤如下: 1.创建XMLHttpRequest对象 2.设置请求参数 请求参数包括 type – 请求方法(GET或POST) url – 指定服务器地址 async – 是否同步请求(true或false) data – 发送的数据 3.发送请求 4.监听响应…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部