JS中实现继承的几种方式

昨天看了个视频，跟老师学了一下关于“JS中实现继承的几种方式”的知识，然后写下了笔记，觉得老师讲得很通俗易懂。

function Person(name,age) {this.name = name;this.age = age;this.study = function() {console.log('正在学习中...');}
}Person.prototype.sex = 'female';
Person.prototype.show = function() {console.log('自我介绍...', this.name + '', this.age + '', this.sex);
}

方式一：对象冒充继承，也称构造继承
核心：使用call，以对象冒充的形式调用父类的构造函数，相当于是复制父类的实例属性给子类
缺点：只能继承父类构造函数中的属性和方法，无法继承原型中的属性和方法

function Student(name,age) {Person.call(this,name,age); //此时Person中的this指向的是Student的对象
}var stu1 = new Student('Lucy',15);
console.log(stu1.name, stu1.age); //Lucy,15
stu1.study();   //正在学习中...//无法继承原型中的属性和方法
console.log(stu1.sex);  //undefined
stu1.show;    //undefined

方式二：原型链继承
核心：使用prototype，将父类的对象左右子类的原型
缺点：创建子类实例时，无法向父类构造函数传参，导致继承的父类属性没有值

function Student(name,age) {}Student.prototype = new Person();   //将Student的原型指向Person实例，从而继承Personvar stu1 = new Student('Lucy',15);
console.log(stu1.name, stu1.age, stu1.sex); //undefined,undefined,female
stu1.study();   //正在学习中...
stu1.show();    //自我介绍... undefined,undefined,female

方式三：组合继承（对象冒充+原型链）

function Student(name,age) {Person.call(this,name,age);
}// Student.prototype = new Person();  调用了两次父类构造函数，生成了两份实例（子类实习将子类原型上的那份屏蔽，所以性能差点）
Student.prototype = Person.prototype;  //完美var stu1 = new Student('Lucy',16);
console.log(stu1.name, stu1.age, stu1.sex); //undefined,undefined,female
stu1.study();   //正在学习中...
stu1.show();    //自我介绍... Lucy,16,female

在此做了下笔记，要是有误的地方请大家多多指点。

JS中实现继承的几种方式相关推荐

Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承第一种抽象继承,创建一个通用父类 ...
JS中遍历数组的两种方式
方式一 for循环 //遍历arr,获取arr中Person对象for(var i=0 ; i<arr.length ; i++){var p = arr[i];//判断Person对象的age ...
JS中获取时间戳的几种方式
在实际的项目开发中,我们经常会遇到使用时间戳的场景,获取时间戳的方式也有很多种,本文做下常用的几种方式: 1. getTime() var dates = new Date(); var times ...
js中定义数组的两种方式
js中定义数组: 注意事项: 1.在js中定义数组,不用担心数组角标越界的问题,可以自动扩容. 2.在js中,数组是可以定义任何数据类型的. 1.指定数组长度运行结果: 2.简写方式:
js中遍历数组的6种方式
1.原生js中for循环 var arr=[1,2,3,4,5];for(var i=0;i<arr.length;i++){console.log(arr[i]) //打印每一个数组元素} 2 ...
js中事件绑定的几种方式
事件处理程序即给元素绑定事件的方式有下列几种:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器事件处理程序.其实这些方式就是一个逐步优化和实现跨浏览器的 ...
【day14】js中清空数组的三种方式
方式1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了方式2,l ...
JS中绑定事件的5种方式——以按钮绑定点击事件为例
按钮 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn& ...
JS中创建函数的几种方式
使用 "函数声明" 创建函数语法:* function 函数名([形参1,形参2...形参N]){* 语句...* } */function fun2(){console.log ...
js中对象合并的4种方式，数组合并的4种方法
目录一.对象合并 1.拓展运算符(...) 2.Object.assign() 3.递归赋值 4.jquery中的extend() 二.数组合并 1.扩展操作符 2.使用array.concat() ...

JS中实现继承的几种方式

JS中实现继承的几种方式相关推荐

最新文章

热门文章