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 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
随机推荐
- Oracle 性能之 Enq: CF - contention
Oracle 性能之 Enq: CF - contention Table of Contents 1. 原因 2. 解决问题 2.1. 针对持有锁进程类型处理 2.1.1. 查看持有锁会话的进程类型 ...
- keyston报错处理
1.35357端口启动不了 [root@controller conf.d]# openstack project create --domain default \ > --descripti ...
- java:面向对象(多态,final,抽象方法,(简单工厂模式即静态方法模式),接口)
* 生活中的多态:同一种物质,因环境不同而表现不同的形态. * 程序中多态:同一个"接口",因不同的实现而执行不同的操作. * 多态和方法的重写经常结合使用,子类重写父类的方法,将 ...
- 121. 买卖股票的最佳时机( Best Time to Buy and Sell Stock)
题目地址:https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock/ 解题思路一:暴力求解法 根据题目我们可以知道,我们知道最大 ...
- Vim常用操作集合
基本上 vi/vim 共分为三种模式,分别是一般命令模式(Command mode),编辑模式(Insert mode)和命令行模式(Last line mode). 命令模式: 用户刚刚启动 vi/ ...
- 手写LVQ(学习向量量化)聚类算法
LVQ聚类与k-means不同之处在于,它是有标记的聚类,设定带标签的k个原型向量(即团簇中心),根据样本标签是否与原型向量的标签一致,对原型向量进行更新. 最后,根据样本到原型向量的距离,对样本进行 ...
- 【Linux开发】linux设备驱动归纳总结(三):5.阻塞型IO实现
linux设备驱动归纳总结(三):5.阻塞型IO实现 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 使用PowerShell 在域内远程安装DFS
# 安装DFS 命名空间.DFS 管理工具.DFS 复制# author:lttr <www.cnblogs.com/GoCircle> # date:2019-08-09 # eg. # ...
- Shell初学(八)linux下的ACL
[1]ACL的作用 简单直接解释一下ACL的作用,即把权限的个别化额外添加. 可以解决如下问题~~比如: [1.1]基于用户: 我有10个用户a1-a10,我有一个文件夹/tmp/test,我想给a1 ...
- 自然语言处理工具hanlp定制用户词条
作者:baiziyu 关于hanlp的文章已经分享过很多,似乎好像大部分以理论性的居多.最近有在整理一些hanlp应用项目中的文章,待整理完成后会陆续分享出来.本篇分享的依然是由baiziyu 分享的 ...