文档章节

说说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
奉贤
程序员
写的一个轻量级javascript框架的设计模式

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

thinkyoung
2014/12/05
0
0
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
07/04
0
0
JavaScript面试大全(二)

eval()是做什么的? [eval()是“魔鬼”][1] null,undefined 的区别? [来看看大神阮一峰的解释吧][2] 写一个通用的事件侦听器函数。 [JS事件监听器][3] Node.js的适用场景? [NodeJS优缺点及...

百变茄
2014/06/05
0
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
06/11
0
0
从Android到React Native开发(二、通信与模块实现)

大家吼,(◐‿◑)作为失踪人口回归,这次第二期,就让我们来怼React Native的通信,快速实现单独的React Native模块到APP里,愉悦吧骚年。至于为什么要有这期?当然是为了愉悦的飙车啦ε-...

carguo
08/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js实现产生n个随机数,并且随机数之和是固定值

function getrandom(minnum , maxnum ,total,size){ var num = total; //定义整数 var length= size; //定义多个整数的数量 var numArr = []; while(length > 1){ var rnd = Math.floor(Mat......

开源昕昕
12分钟前
1
0
精选Spring Boot三十五道必知必会知识点!

Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家。本文精选了三十五个常见的Spring Boot知识点,祝你一臂之力! 问题一 Spring Boot、Spring MVC 和 Sp...

Java填坑之路
14分钟前
2
0
MyBatis学习笔记

相关文档 mybatis深入理解(一)之 # 与 $ 区别以及 sql 预编译 MyBatis 处理sql中的 大于,小于,大于等于,小于等于

OSC_fly
15分钟前
0
0
Gradle从不同地方复制文件到一个文件夹/打zip包

复制 task copySDK(type: Copy, dependsOn: [":fatJarTask"]) { delete JAR_NAME delete SDK_OUT_PATH delete "$ROOT_BUILD_PATH/$SDK_ZIP_NAME" into('/jniLibs') {......

SuShine
15分钟前
0
0
CentOS关闭占用端口,修改Apache默认端口,并重启Apache

查找并关闭进程 在Linux系统中可以使用lsof命令和kill命令,两个命令配合查找并关闭占用端口的进程 查看某一端口使用情况的命令: lsof -i:端口号 效果如下,PID即进程的ID 根据PID关闭进程,...

临江仙卜算子
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部