今天给自己巩固一下js的继承知识,基础不好,有不对的地方,请尽量拍砖,越重越好。

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。

1.原型(prototype):

 function Body(name,age){// 创建一个Body类
     this.name = name;// 赋予基础属性name、age
     this.age = age;
 }
 Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
     console.log(this.name);
 }
 var a = new Body('wutao','10');//创建一个Body的实例对象

 function Another(){}
 Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
 var b = new Another();//创建Another子类的实例
 Another.prototype.sex ="mail";//定义子类的属性及方法
 Another.prototype.saySex = function(){
     console.log(this.sex);
 }
 a.sayName();//wutao
 b.sayName();//www 实例b拥有父类Body的方法sayName
 b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数(call&apply),也可以理解为组合式继承

call:

 function Person(name){
     this.name = name;
     this.sayHello = function(){
         console.log(this.name);
     }
 }

 function Son(name,age){
     Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
     this.age = age;
     this.sayFunc = function(){
         console.log(this.name+"-"+this.age);
     }
 }
 var a = new Person('wutao');
 var b = new Son("wwwwww",22);
 a.sayHello();//wutao
 b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
 b.sayFunc();//wwwwww-22

apply:

 function Person(name){
     this.name = name;
     this.sayHello = function(){
         console.log(this.name);
     }
 }

 function Son(name,age){
     Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
     this.age = age;
     this.sayFunc = function(){
         console.log(this.name+"-"+this.age);
     }
 }
 var a = new Person('wutao');
 var b = new Son("ttt",222);
 a.sayHello();//wutao
  b.sayFunc();//ttt-222

js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。

有不足的地方,希望大虾大神们指出!

谈谈JavaScript的2种主要继承方式的更多相关文章

  1. 谈谈javascript中的prototype与继承

    谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...

  2. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  3. Javascript的一种代码结构方式——插件式

    上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重.拓展.修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤 ...

  4. JS中5种经典继承方式

    继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...

  5. JavaScript的几种循环使用方式及性能解析

    循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...

  6. JavaScript中三种字符串连接方式及其性能比较

    参考地址: https://www.cnblogs.com/programs/p/5554742.html 工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方 ...

  7. C++中的三种继承方式

    1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...

  8. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  9. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

随机推荐

  1. gulp-uglify《JS压缩》----gulp系列(四)

    本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img) ...

  2. 任督二脉之Shell中的正则表达式

    VBird说学习Linux,掌握了Shell和正则就相当于打通了任督二脉,此后能力的成长才会突飞猛进. Shell的基础学习之前已经总结了一篇博客:http://www.cnblogs.com/jyz ...

  3. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...

  4. XSS 和 CSRF 攻击

    web安全中有很多种攻击手段,除了SQL注入外,比较常见的还有 XSS 和 CSRF等 一.XSS(Cross Site Scripting)跨站脚本 XSS其实就是Html的注入问题,攻击者的输入没 ...

  5. linq order by charindex 排序 按给定字符串顺序排序

    //list=list.OrderBy(ee => SqlFunctions.CharIndex("书记,主任,支部委员,村委委员,系统工作人员", ee.ZhiWu)).T ...

  6. 具有timeout 功能的函数调用

    做项目的时候有时经常会需要一个带有timeout功能的函数调用. 比如从后台读数据并期望在给定时间内返回.借此机会包装了一个简单的C# class, 直接上代码吧. public class Time ...

  7. 外表cms,内在wiki的系统anwiki

    比较完整面向对象的语法格式,     外表cms,内在wiki的系统   http://enanocms.org/features   比较老,php4的语法

  8. JavaMail入门第五篇 解析邮件

    上一篇JavaMail入门第四篇 接收邮件中,控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类 ...

  9. [PHP] java读取PHP接口数据

    和安卓是一个道理,读取json数据 PHP文件: <?php class Test{ //日志路径 const LOG_PATH="E:\phpServer\Apache\logs\\ ...

  10. 机器学习实战 - 读书笔记(05) - Logistic回归

    解释 Logistic回归用于寻找最优化算法. 最优化算法可以解决最XX问题,比如如何在最短时间内从A点到达B点?如何投入最少工作量却获得最大的效益?如何设计发动机使得油耗最少而功率最大? 我们可以看 ...