文档章节

说说js的继承实现

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/27 10:38
字数 398
阅读 4
收藏 0
1、原型链继承

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;//父元素修改了salary原型属性
bill.salary=20000;    //由于bill继承了父元素,所以修改salary也修改了父元素的原型属性

document.write(bill.salary);//20000

</script>

 

 

特点:

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

 

2、构造继承

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点:

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

 

3.拷贝继承

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};
function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点:

  1. 支持多继承

缺点:

  1. 效率较低,内存占用高(因为要拷贝父类的属性)
  2. 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

 

 

 

© 著作权归作者所有

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
私信 提问
sitemesh3 中怎么把某个tag的内容放置到父页面的指定位置?

sitemesh3默认只提供了title、head、body几个tag可以write到父页面的指定位置,不过我这有个需求想把某些tag(例如自定义的...)的内容扔到父页面的指定位置。 说说这个需求的场景吧,我们一...

郁也风
2012/06/06
3.2K
1
写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung
2014/12/05
0
0
撩课-每天刷Web面试题(前10天汇总)

原文https://mp.weixin.qq.com/s/euBfmBly7GnnYsk6Kgz2Yw 前言 后台很多小伙伴给我发私信说公众号上面试题刷不了了,因为之前系统迁移导致数据丢失。 目前在撩课官网(itlike.com)上三大学科每...

大灰狼的小绵羊哥哥
2018/11/29
0
0
深入理解JavaScript原型链与继承

原型链 原型链一直都是一个在JS中比较让人费解的知识点,但是在面试中经常会被问到,这里我来做一个总结吧,首先引入一个关系图: 一.要理解原型链,首先可以从上图开始入手,图中有三个概念...

最爱你的我
2018/12/06
0
0
刷《一年半经验,百度、有赞、阿里面试总结》·手记

在掘金上看到了一位大佬发了一篇很详细的面试记录文章-《一年半经验,百度、有赞、阿里面试总结》,为了查漏补缺,抽空就详细做了下。(估计只有我这么无聊了哈哈哈) 有给出的或者有些不完善...

大灰狼的小绵羊哥哥
2018/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java B2B2C o2o多用户商城 springcloud架构-docker-feign-hystrix(六)

简介 上一节我们讨论feign的配置,这节我们讨论一下,feign+hystrix调用生产者时,进行容错处理 一、创建模块(microservice-consumer-movie-feign-with-hystrix) 二、pom.xml文件 <?xml ve...

sccspuercode
5分钟前
1
0
简单聊聊Linux学习经历

简单聊聊Linux学习经历 学习,是我们一生中都规避不了的一个话题,人的一生中都是在不断的学习,无论是功成名就的人士,还是一无是处的小混混,始终都处在一个不断学习的环境中,只是学习的内...

linuxCool
24分钟前
2
0
C++ This 详解

分类: C++ this 是 C++ 中的一个关键字,也是一个 const 指针,它指向当前对象,通过它可以访问当前对象的所有成员。 所谓当前对象,是指正在使用的对象。例如对于stu.show();,stu 就是当前...

天王盖地虎626
51分钟前
3
0
如何自制一个Spring Boot Starter并推送到远端公服

概 述 传统的 Maven项目一般将需要被复用的组件做成 Module来进行管理,以便二次调用;而在 Spring Boot项目中我们则可以使用更加优雅的 Spring Boot Starter来完成这一切。 基于Spring Boot...

CodeSheep
58分钟前
1
0
大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部