聊一聊Javasript继承
时间:2022-05-06
本文章向大家介绍聊一聊Javasript继承,主要内容包括Demo构造函数声明类、prototype属性、constructor属性、常用Object之间“继承”(构造函数继承)(5种)、非构造函数“继承”(3种)、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前前后后已经快写了2年左右javaScript,刚开始只是简单用于一些表单验证和操作dom节点,并没有深入的使用,随着渐渐的深入,开始不想去写重复的代码(懒的开始),从而写简单的继承,封装,抽象等等,最终效果写重复代码少、可用性高(主要:迭代快、代码可以持续使用,加班也少)
Demo构造函数声明类
function Person(name){
this.name = name;
}
new生成实例
new生成实例的缺点:无法共享属性和方法,每次new新的实例会开辟新的内存空间,造成极大的资源浪费。
var personA = new Person('小明');
console.log(personA.name);
构造函数的this指向新的实例 如:
function Person(name){
this.name = name;
this.sex = '女'
}
var personA = new Person('小明');
var personB = new Person('小妞');
personA.sex = '男';
console.log(personB.sex); //女
在这里我们该采用声明解决方案呢?设计者很好的解决了这个问题,那么就是prototype属性(包含对象)的引入
prototype属性
它的好处是,实例一旦创建,将自动共同持有共享属性和方法,如:
function Person(name){
this.name = name;
}
Person.prototype.sex = '女';
var personA = new Person('小明');
var personB = new Person('小妞');
console.log(personA.sex); //女
console.log(personB.sex); //女
//证明它们是共享的
Person.prototype.sex = '男';
console.log(personA.sex); //男
console.log(personB.sex); //男
也许在这里你看不出prototype的好处,但是当你有很多方法和属性时,你的运行效率还高嘛?那么:
function Person(name, sex){
this.name = name;
this.sex = sex,
this.country = '中国',
this.show = function(){
console.log(this.name + '的国籍是:'+this.country+',性别:'+this.sex);
}
}
var personA = new Person('小明'.'男');
personA.show(); //小明的国籍是是中国,性别:男
var personB = new Person('小妞','女');
personB.show(); //小妞的国籍是是中国,性别:女
感觉似乎没有什么问题,但是personA和personB都包含有country、show属性方法一模一样的内容,这样就造成了空间的浪费,效率也降低了,那么我们可以它们共享属性和方法
function Person(name, sex){
this.name = name;
this.sex = sex,
}
Person.prototype.country = '中国';
Person.prototype.show = function(){
console.log(this.name + '的国籍是:'+this.country+',性别:'+this.sex);
}
var personA = new Person('小明'.'男');
var personB = new Person('小妞','女');
personA.show(); //小明的国籍是是中国,性别:男
personB.show(); //小妞的国籍是是中国,性别:女
配合protorype使用的属性--isPrototypeOf(),hasOwnPrototype(),in
function Person(name, sex){
this.name = name;
this.sex = sex,
}
Person.prototype.country = '中国';
Person.prototype.show = function(){
console.log(this.name + '的国籍是:'+this.country+',性别:'+this.sex);
}
//isPrototypeOf() 判断实例和对象之间的关系
console.log(Person.prototype.isPrototype(personA)) //true
console.log(Person.prototype.isPrototype(personB)) //true
//hasOwnPrototype() 判断属性是本地属性,还是继承自prototype属性
console.log(personA.hasOwnPrototy('name')) //true
console.log(personA.hasOwnPrototy('country')) //false
//in 判断是否含有属性,不管本地还是继承prototype
console.log('name' in personA) //true
console.log('country' in personA) //true
constructor属性
继续使用前面Person原型对象
function Person(name){
this.name = name;
}
Person.prototype.sex = '女';
var personA = new Person('小明');
var personB = new Person('小妞');
//新增的实例自动包含有constructor属性
console.log(personA.constructor == Person); //true
console.log(personB.constructor == Person); //true
这里也可以使用instanceof判断实例和原型对象之间的关系
console.log(personA instanceof Person); //true
console.log(personB instanceof Person); //true
常用Object之间“继承”(构造函数继承)(5种)
假设现在有Person和Teacher两个Object,想让Teacher继承Person
//Person对象
function Person(name){
this.name = name;
}
//Teacher对象
function Teacher(age,sex){
this.age = age;
this.sex = sex;
}
1、利用构造函数绑定(call或者apply)
function Teacher(age,sex,name){
Person.apply(this,name);//Person.call(this,name);
this.age = age;
this.sex =sex;
}
2、使用prototype,也就是我们前面说prototype属性,修改constructor指向
Teacher.prototype = new Person('xiaoming'); //修改prototy对象原先的值
Teacher.prototype.constructor = Teacher;
var teacher1 = new Teacher(19,'女');
3、直接继承prototype
function Person(){}
person.prototype.name = "xiaoming";
function Teacher(age,sex){
this.age = age;
this.sex = sex;
}
//Teacher的prototype对象直接指向Person的prototype对象
Teacher.prototype = Person.prototype;
Teacher.prototype.constructor = Teacher
var teacher1 = new Teacher(19,"女");
4、中介new function(){}空对象
var Fn = new function(){};
Fn.prototype = Person.prototype;
Teacher.prototype = new Fn();
Teacher.prototype.constructor = Teacher;
//扩展封装
function Extend(ChildObj,ParentObj){
var Fn = new function(){};
Fn.prototype = ParentObj.prototype;
ChildObj.prototype = new Fn();
ChildObj.prototype.constructor = ChildObj;
ChildObj.uber = ParentObj.prototype; //直接指向父对象prototype属性
}
//Teacher继承Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,'女');
5、拷贝继承(完全)
function Extend(ChildObj, ParentObj) {
var p = ParentObj.prototype;
var c = ChildObj.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
//Teacher继承Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,'女');
非构造函数“继承”(3种)
//原始
var Person = {
name: '小明'
}
var Teacher ={
age:19,
sex:'女'
}
这里我们如何可以让Teacher继承Person
1、object方法
function object(obj){
function Fn(){}
Fn.prototype = obj;
return new Fn();
}
var teacher1 = object(Person);
teacher1.age = 19;
teacher1.sex = '女';
2、浅拷贝方法
function extendCopy(ParentObj){
var c = {};
for(var i in ParentObj){
c[i] = p[i];
}
c.uber = p;
return c;
}
//使用extendCopy
var teacher1 = extendCopy(Person);
teacher1.age = 19;
teacher1.sex = '女';
3、深拷贝方法
function extendDeepCopy(ParentObj,ChildObj){
var ChildObj = ChildObj || {};
for(var i in ParentObj){
if(typeof ParentObj[i] === 'object'){
c[i] = (ParentObj[i].constructor === Array) ? [] : {};
extendDeepCopy(ChildObj[i],ParentObj[i]);
}else{
ChildObj[i] = ParentObj[i];
}
}
return ChildObj;
}
//使用
var teacher1 = extendDeepCopy(Person1);
teacher1.age = 19;
teacher1.sex = '女';
本文版权归作者共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
- 教你快速安装OpenShift容器平台3.6
- 面向开发者的Cloud Foundry
- 云数据库安全与农场和餐馆:知道来源的重要性
- 云数据库安全,农场和餐馆:知道你的来源的重要性
- NO.32 不堪重负:线程池拒绝策略
- 工厂模式进阶之Android中工厂模式源码分析
- C加加游戏编程,大神十年的绝技,正确的入门,这才叫学习
- 我们应该担心吗?人工智能现在可以通过交谈来学习新单词!
- 印度财政部:比特币是纯粹投机行为 区块链资产是“庞氏骗局”
- 法律人工智能实验室成立,法官和律师会丢饭碗吗?
- 让GridView中CheckBox列支持FireFox
- 在ASP.NET MVC中通过URL路由实现对多语言的支持
- AI加持下的假肢将会越来越聪明
- 通过几个Hello World感受.NET Core全新的开发体验
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 【Kick Algorithm】十大排序算法及其Python实现
- 【情感分析】ABSA模型总结(PART II)
- 【NLP保姆级教程】手把手带你RCNN文本分类(附代码)
- 【NLP保姆级教程】手把手带你HAN文本分类(附代码)
- 【情感分析】基于Aspect的情感分析模型总结(PART III)
- NLP简报(Issue#6)
- python实现kNN(最近邻)
- python实现朴素贝叶斯
- Transformers Assemble(PART V)
- 面试官问我:如何加载100M的图片却不撑爆内存,一张 100M 的大图,如何预防 OOM?
- 预训练模型中的可插拔式知识融入——利用Adapter结构
- 【情感分析】基于Aspect的情感分析模型总结(PART IV)
- 详解ERNIE-Baidu进化史及应用场景
- 安排!微软UniLM 2.0解读
- SpringBoot的事务传播机制