ES6部分源码重写 -1(ES5-构造函数解析)
时间:2022-07-25
本文章向大家介绍ES6部分源码重写 -1(ES5-构造函数解析),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
ES6部分源码重写 -1
剖析ES5中对象的使用
创建一个飞机的对象 该对象具有以下属性和方法
- 名称
- 血量
- 飞行方法 此处将方法定义在飞机的原型上,从效率的角度来看更低
Plane.prototype.fly = function(){
console.log("fly");
}
function Plane(){
this.name = name || "一般飞机";
this.blood = 100;
}
//创建一个飞机的对象
var plane = new Plane("梦想号");
此时,因为军事实力的提升,我们的需求发生改变,需要生产具有攻击能力的战斗机 所以,我们在创建一个攻击机的构造工厂 因为后来生产的飞机是在已有工厂的前提下生产的,所以采用继承的方式来创造战斗机 此时飞机具有的功能有
- 名称
- 血量
- 旋转
- 飞行的方法
- 攻击的方法 此处的继承分为
- 继承私有属性(指的是继承Plan里的私有变量,eg: name/blood)
- 继承原型上的方法(eg:fly) 继承私有属性
function AttackPlane(){
Plane.apply(this, "歼击机-01");
this.rotate = true;
}
继承原型上的方法有很多种,如下(此处使用父类和子类代替飞机的关系)
- 直接将父类的原型赋值给子类的原型
- 这种方式的缺点:如果在子类的原型上添加一个方法,那么父类的原型上也会添加相应的方法
AttackPlane.prototype = Plane.prototype;
AttackPlane.prototype.attack = function(){
console.log("轰炸中。。。。");
}
function AttackPlane(){
Plane.apply(this, "歼击机-01");
this.rotate = true;
}
var plane1 = new Plane();
控制台看效果
所以采用此种方法继承会导致父类多出不需要的方法
2.将父类的对象new一个实例赋予子类的原型
AttackPlane.prototype = new Plane();
AttackPlane.prototype.attack = function(){
console.log("轰炸中。。。。");
}
function AttackPlane(){
Plane.apply(this, "歼击机-01");
this.rotate = true;
}
var plane1 = new Plane();
采用new Plane的方式会导致子类的原型上会将父类的私有属性继承下来,所以也不合适
- 使用中间变量的方式
let temp = function () { };
temp.prototype = Plane.prototype;
AttackPlane.prototype = temp.prototype;
AttackPlane.prototype.attack = function () {
console.log("轰炸....");
}
AttackPlane.prototype.attack = function () {
console.log("轰炸中。。。。");
}
function AttackPlane() {
Plane.apply(this, "歼击机-01");
this.rotate = true;
}
var plane1 = new Plane();
此种方式也没有避免子类的方法顺着原型链传到父类的身上
4.采用
- Object.create();方法;
- Object.setPrototypeOf();方法;
- 构造函数的原型的__proto__ = 父类的原型 上面的三种方式都能实现圣杯模式的继承 选中其中一个来写使用即可
//这种方法写起来比较复杂,没有兼容性问题
AttackPlan.prototype = Object.create(Plan.prototype, {
constructor:AttackPlan
})
//老版本浏览器会有兼容性问题,有时需要左兼容性处理,采用最多
AttackPlan.prototype = Object.setPrototypeOf(AttackPlan.prototype, Plan.prototype);
//最粗暴的方法,大佬的做法
AttackPlan.prototype.__proto__ = Plan.prototype;
AttackPlane.prototype.attack = function () {
console.log("轰炸....");
}
AttackPlane.prototype.attack = function () {
console.log("轰炸中。。。。");
}
function AttackPlane() {
Plane.apply(this, "歼击机-01");
this.rotate = true;
}
var plane1 = new Plane();
这三种情况下,都能避免子类的的方法污染父类的方法 也不会使父类的私有变量跑到子类的原型上去
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos7实现MySQL基于日志还原数据的示例代码
- Android 三种延迟操作的实现方法
- 基于Android在布局中动态添加view的两种方法(总结)
- Android向node.js编写的服务器发送数据并接收请求
- Android startActivityForResult和setResult的区别
- Linux系统使用Fuser命令的方法
- Android实现地理定位功能
- Android实现在ServiceManager中加入自定义服务的方法详解
- Android studio so库找不到问题解决办法
- Android使用ViewPager实现屏幕滑动效果
- Android 自定义view实现进度条加载效果实例代码
- Android电池电量监听的示例代码
- Android 解决ScrollView嵌套CridView显示问题
- Android利用zxing快速集成二维码扫描的实例教程
- Android中使用SharedPreferences完成记住账号密码的功能