js 继承的简单理解
什么是继承
- js中的继承就是获取存在对象已有属性和方法的一种方式.
继承一 属性拷贝
就是将对象的成员复制一份给需要继承的对象.
// 创建父对象
var superObj = {
name:'liyajie',
age:25,
friends:['小名','小丽','二蛋'],
showName:function(){
console.log(this.name);
}
} // 创建需要继承的子对象
var subObj = {};
// 开始拷贝属性(使用for...in...循环)
for(var i in superObj){
subObj[i] = superObj[i];
}
// 这里我们打印下subObj看下
console.log(subObj);
// 打印superObj(父对象)
console.log(superObj);
上述代码打印结果是一样的, 但是存在几点问题
属性拷贝继承的问题
如果继承过来的成员是引用类型的话,
那么这个引用类型的成员在父对象和子对象之间是共享的,
也就是说修改了之后, 父子对象都会受到影响.
继承二 原型式继承
原型式继承就是借用构造函数的原型对象实现继承. 即 子构造函数.prototype = 父构造函数.prototype
// 创建父构造函数
function SuperClass(name){
this.name = name;
this.showName = function(){
console.log(this.name);
}
}
// 设置父构造器的原型对象
SuperClass.prototype.age = 25;
SuperClass.prototype.friends = ['小名','小丽'];
SuperClass.prototype.showAge = function(){
console.log(this.age);
} // 创建子构造函数, 刚开始没有任何成员
function SubClass(){
}
// 设置子构造器的原型对象实现继承
SubClass.prototype = SuperClass.prototype;
// 因为子构造函数的原型被覆盖了, 所以现在子构造函数的原型的构造器属性已经不在指向SubClass,
// 而是SuperClass,我们需要修正
console.log(SubClass.prototype.constructor == SuperClass);// true
console.log(SuperClass.prototype.constructor == SuperClass);// true
SuperClass.prototype.constructor = SubClass;
// 上面这行代码之后, 就实现了继承
var child = new SubClass();
console.log(child.age);//
console.log(child.friends);// ['小名','小丽']
child.showAge();//
!> 只能继承父构造函数的原型对象上的成员, 不能继承父构造函数的实例对象的成员, 同时父构造函数的原型对象和子构造函数的原型对象上的成员有共享问题
继承三 原型链继承
原型链继承 即 子构造函数.prototype = new 父构造函数();
// 创建父构造函数
function SuperClass(){
this.name = 'liyajie';
this.age = 25;
this.showName = function(){
console.log(this.name);
}
}
// 设置父构造函数的原型
SuperClass.prototype.friends = ['小名', '小强'];
SuperClass.prototype.showAge = function(){
console.log(this.age);
}
// 创建子构造函数
function SubClass(){ }
// 实现继承
SubClass.prototype = new SuperClass();
// 修改子构造函数的原型的构造器属性
SubClass.prototype.constructor = SubClass; var child = new SubClass();
console.log(child.name); // liyajie
console.log(child.age);//
child.showName();// liyajie
child.showAge();//
console.log(child.friends); // ['小名','小强'] // 当我们改变friends的时候, 父构造函数的原型对象的也会变化
child.friends.push('小王八');
console.log(child.friends);["小名", "小强", "小王八"]
var father = new SuperClass();
console.log(father.friends);["小名", "小强", "小王八"]
问题是不能给父构造函数传递参数, 父子构造函数的原型对象之间有共享问题.
继承四 借用构造函数
使用
call
和apply
借用其他构造函数的成员, 可以解决给父构造函数传递参数的问题, 但是获取不到父构造函数原型上的成员.也不存在共享问题.
// 创建父构造函数
function Person(name){
this.name = name;
this.friends = ['小王','小强'];
this.showName = function(){
console.log(this.name);
}
}
// 创建子构造函数
function Student(name){
// 使用call借用Person的构造函数
Person.call(this,name);
}
// 测试是否有了Person的成员
var stu = new Student('liyajie');
stu.showName(); // liyajie
console.log(stu.friends); // ['小王','小强']
继承五 组合继承
借用构造函数 + 原型式继承
// 创建父构造函数
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
}
}
// 设置父构造函数的原型对象
Person.prototype.showAge = function(){
console.log(this.age);
}
// 创建子构造函数
function Student(name){
Person.call(this,name);
}
// 设置继承
Student.prototype = Object.create(Person.prototype);
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
// 上面代码解决了 父构造函数的属性继承到了子构造函数的实例对象上了,
// 并且继承了父构造函数原型对象上的成员,
// 解决了给父构造函数传递参数问题
// 但是还有共享的问题
问题: 还有共享的问题
继承六 借用构造函数 + 深拷贝
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
}
}
Person.prototype.friends = ['小王','小强','小王八']; function Student(name,25){
// 借用构造函数(Person)
Person.call(this,name,25);
}
// 使用深拷贝实现继承
deepCopy(Student.prototype,Person.prototype);
Student.prototype.constructor = Student;
// 这样就将Person的原型对象上的成员拷贝到了Student的原型上了, 这种方式没有属性共享的问题.
推荐使用这种方式.
深拷贝(递归)
使用递归实现, 主要是为了解决对象中引用类型的成员的共享问题.
好处是不管是值类型的属性还是引用类型的成员都不会有共享问题.
// 将obj2的成员拷贝到obj1中, 只拷贝实例成员
function deepCopy(obj1, obj2) {
for (var key in obj2) {
// 判断是否是obj2上的实例成员
if (obj2.hasOwnProperty(key)) {
// 判断是否是引用类型的成员变量
if (typeof obj2[key] == 'object') {
obj1[key] = Array.isArray(obj2[key]) ? [] : {};
deepCopy(obj1[key], obj2[key]);
} else {
obj1[key] = obj2[key];
}
}
}
} var person = {
name: 'liyajie',
age: 25,
showName: function() {
console.log(this.name);
},
friends: [1, 2, 3, 4],
family: {
father: 'ligang',
mather: 'sizhongzhen',
wife: 'dan',
baby: 'weijun'
}
}
var student = {};
// 将person的成员拷贝到student对象上.
deepCopy(student, person);
Array.isArray()
此方法主要是来判断某个对象是否是数组, 因为是ES5的新特性, 所有有兼容性问题.
// 检查是否是数组对象
function checkIsArray(obj){
if(Array.isArray){// 如果有这个属性
return Array.isArray(obj);
} else {
return Object.prototype.toString.call(obj) == '[object Array]';
}
}
instanceof
简单来说用来判断某个对象是否是由某个构造函数创建的.
严谨一点: 用来检查某个对象的构造函数的原型对象是否在当前对象的原型链上, 因为原型链可以任意由我们修改
示例代码如下:
function Person(){}
var person = new Person();
console.log(person instanceof Person); // true
Person.prototype = {};
console.log(person instanceof Person); // false
作者:LiYajie
链接:https://www.jianshu.com/p/1016160e91fe
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
js 继承的简单理解的更多相关文章
- JS继承(简单理解版)
童鞋们,我们今天聊聊js的继承,关于继承,平时开发基本用不到,但是面试没有不考的,我就想问,这是人干的事吗? 好吧,迫于社会主义核心价值观,我们今天就来简单说一说js的继承,谁让它是面向对象编程很重要 ...
- 对于js原型和原型链继承的简单理解(第三种,复制继承)
复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...
- 对于js原型和原型链继承的简单理解(第一种,原型链继承)
原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...
- js 继承的简单易懂小例子
js 继承 今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}func ...
- JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...
- 对于js原型和原型链继承的简单理解(第二种,对象冒充)
关键代码 this.parent = Cat; this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...
- js 闭包的简单理解
let a = function(){ var i=0; let b = function(){ i++; alert(i); } return b; } let c = a(); c(); 这段代码 ...
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...
- js 模块化的一些理解和es6模块化学习
模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理 5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
随机推荐
- Java调用Redis集群
前文 需要使用以下jar包 Maven项目引用以下配置: <dependency> <groupId>org.apache.commons</groupId> &l ...
- Django Auth模块及User对象方法
一:Django的用户认证 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1:authenticat ...
- Session中的方法概述
一.操作实体对象 delete()把持久化或游离转为删除状态 save()把临时状态变为持久化状态(交给Sessioin管理) saveOrUpdate()把临时或游离状态转为持久化状态 update ...
- logging.basicConfig函数各参数:
import logging logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[line:%(line ...
- 【HANA系列】SAP HANA SQL取表中每行最小值
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL取表中每 ...
- 338.比特位计数( Counting Bits)leetcode
附上:题目地址:https://leetcode-cn.com/problems/counting-bits/submissions/ 1:题目: 给定一个非负整数 num.对于 0 ≤ i ≤ nu ...
- &&、()、||决定linux命令的执行顺序
在执行某个命令时,有时需要依赖前面的命令是否执行成功.假如你想通过ssh命令复制很多数据文件到另外的机器后,删除所有源有文件,所以在删除源有文件之前首先要确定复制是不是执行成功.只要执行复制成功才可以 ...
- 【AMAD】watchdog -- 用于监控文件系统的事件,并且提供了shell命令行工具
简介 动机 作用 用法 个人评分 简介 用于监控文件系统的事件的Python库,并且提供了shell命令行工具 动机 有很多情况下,我们希望监控文件的变化,在变化之后作出一些响应. 比如flask,d ...
- KVM虚拟化原理
CPU虚拟化 KVM虚拟化是需要硬件支持的.我们可以用 egrep -o '(vmx|svm)' /proc/cpuinfo 来查看是否支持CPU虚拟化. 虚拟机中每一个vCPU对应qemu-kvm中 ...
- Adobe Acrobat XI 中文版激活方法
Adobe Acrobat XI不仅只是出色的PDF编辑.转换软件.此次更新深度整合了Microsoft Office套件,实现了PDF与Word.Excel以及PowerPoint等文档间的无缝相互 ...