今天给自己巩固一下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. Appium移动自动化测试(四)--one demo

    继续更新. -------------------------------------------- 第四节  安装Appium Client Appium Client是对webdriver原生ap ...

  2. 更加优雅地搭建SSH框架(使用java配置)

    时代在不断进步,大量基于xml的配置所带来的弊端也显而易见,在XML配置和直接注解式配置之外还有一种有趣的选择方式-JavaConfig,它是在Spring 3.0开始从一个独立的项目并入到Sprin ...

  3. 在IIS7中使用ARR(Application Request Routing)反向代理虚拟目录到Nodejs站点

    目标: 1.访问www.arrdemo.com/proxy 跳转到 localhost:8898的Nodejs站点 2.Nodejs站点的页面可以返回到浏览器,包括js,css,图片 3.Nodejs ...

  4. 根据IP地址获取地址所在城市帮助类(IPHelper)

    很多类库都是需要在长时间的编写过程中进行积累的,进入软件编程行业已经是第五个年头了,从2011年写下第一行代码到现在不知道已经写了多少行代码了,时间也过得挺快的.最近事情比较多,也很少写博客了,最近项 ...

  5. sqldbhelper

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data. ...

  6. php学习笔记:利用递归实现删除文件目录

    直接删除目录,如果是空目录是可以删除,如果不是空目录,这时候只能先删除目录里面的文件,然后再删除目录.我封装了个删除函数,然后直接调用这个函数.喜欢的可以直接拿去用,编码是gbk的,使用时候注意下编码 ...

  7. 如何使用mybatis《二》

    前边阐述了如何在java项目中使用mybatis,我们使用的是映射文件的方式,在获得具体的数据操作方法时需要传入映射文件中namespace+“.”方法名称,这种方式有时候会感觉很不爽,很麻烦.我们在 ...

  8. mysql root用户kill connection报ERROR 1095 (HY000): You are not owner of thread N

    今日某系统mysql root用户kill connection时报ERROR 1095 (HY000): You are not owner of thread N 按说通过root用户具有supe ...

  9. android onNewIntent

    在Android应用程序开发的时候,从一个Activity启动另一个Activity并传递一些数据到新的Activity上非常简单,但是当您需要让后台运行的Activity回到前台并传递一些数据可能就 ...

  10. java微信开发(wechat4j)——设置响应微信参数

    设置响应微信参数 wechat4j框架官方文档: https://github.com/sword-org/wechat4j/wiki