谈一谈javascript中继承的多种方式


Posted in Javascript onFebruary 19, 2016

JS 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。

var o=new Object();

其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object是万物祖先,Everything is object 嘛。 

1、内置对象都继承自object

var myNumber = new Number(10); //实例化一个数字对象

字符串对象,其实是String对象的一个实例化 

var s = ‘str';

 除了可以访问自身属性方法,还能访问父类属性方法

console.log(s.toUpperCase());
console.log(s.toString());

2、自定义对象的继承

// 父类
  var Person = function(){
   this.name='AV老师';
   this.test='测试中的毕福剑';
  } 
  Person.prototype={
   say:function(){
    console.log('呀买碟');
   }
  }
  // 构造函数
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 继承person,则拥有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 苍老师拥有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3、自定义对象继承的原型链演示

(function() {
   //父类
   function SuperParent() {
    this.name = 'mike';
   }

   //子类继承父亲 - 二次继承:
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通过原型,形成链条

   var parent = new Parent();
   console.log("测试父亲可以访问爷爷属性:" + parent.name);
   console.log("测试父亲可以访问自己的属性:" + parent.age);

   //继续原型链继承 - 三次继承
   function Child() { //brother构造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //继续原型链继承


   //原型链测试2
   //儿子集成爷爷
   var child = new Child();
   console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike
   console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出12
   console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出12

   //原型链测试
   //爷爷可以访问Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null

   console.log(child.name);
   //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》
   //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。
  })()

4、构造函数继承

(function() {
   function People() {
    this.race = '人类';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖对象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一样的,注意第二个参数
    this.name = name;
    this.skin = skin;
   }
   //实例化 
   var zhangsan = new Shemale('张三', '黄皮肤')
   console.log(zhangsan.name); //张三
   console.log(zhangsan.skin); //黄皮肤
   console.log(zhangsan.race); //人类
  })()

5、组合继承

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

   function Man(name, age, no) {
    /*会自动调用Person的方法,同时将name age传递过去*/
    Person.call(this, name, age);
    //自己的属性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("张三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

6、拷贝继承

<script>
  +(function() {
   var Chinese = {
    nation: '中国'
   };
   var Doctor = {
    career: '医生'
   };
   //  请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
   //  这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
   function extend(p) {
    var c = {};
    for (var i in p) {
 
     c[i] = p[i];


    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = '医生';
   alert(Doctor.nation); // 中国
  })()
 </script>

7、寄生组合继承

<script>
  +(function() {
   /*继承的固定函数*/
   function inheritPrototype(subType, superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
   }

   function Person(name) {
    this.name = name;
   }
   Person.prototype.say = function() {}

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

   inheritPrototype(Student, Person);
   var xiaozhang = new Student('小张', 20);
   console.log(xiaozhang.name)
  })()
 </script>

8、使用第三方框架实现继承

<script src='simple.js'></script> 
 <!-- 使用的第三方框架simple.js -->
 <script>
  +(function() { < script >
    var Person = Class.extend({
     init: function(age, name) {
      this.age = age;
      this.name = name;
     },
     ppp: function() {
      alert("你懂的");
     }
    });
   var Man = Person.extend({
    init: function(age, name, height) {
     this._super(age, name);
     this.height = height;
    },
    ppp: function() {
     /*调用父类的同名方法*/
     this._super();
     /*同时又可以调用自己的方法*/
     alert("好害羞 -,- ");
    }
   });


   var xiaozhang = new Man(21, '小张', '121');
   xiaozhang.ppp();
  })()

希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 #Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
You might like
php 获取客户端的真实ip
2009/11/30 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
javascript中 try catch用法
2015/08/16 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
Python 递归函数详解及实例
2016/12/27 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
市场营销管理制度
2014/01/29 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
教室标语大全
2014/06/21 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python