JS面向对象(二)---继承
一、面向对象的继承
1、解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能
2、如何添加继承---拷贝继承
属性:call
方法: for in
/*
继承:子类不影响父类,子类可以继承父类的一些功能(代码复用)
属性的继承:调用父类的构造1函数 call
方法的继承:for in 拷贝继承
*/
//父类
function CreatePerson(name,sex){
this.name = name;
this.sex = sex;
}
CreatePerson.prototype.showName = function(){
alert(this.name)
}
var p1 = new CreatePerson('小明','男')
p1.showName() //小明 //子类
function CreateStar(name,sex,job){
CreatePerson.call(this,name,sex);
this.job = job;
}
//拷贝继承
extend(CreateStar.prototype,CreatePerson.prototype)
var p2 = new CreateStar("周杰伦",'男','歌手');
p2.showName(); //周杰伦 //面向对象的拷贝复制,防止影响父类对象的内容
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
然后按照继承的方式做了一个窗口拖拽的demo,你可以狠狠的点击这里,进行查看
二、继承的其他形式(用的不是很多)
1、类式继承 : 利用构造函数(类)继承的方式
/*js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的 * */
//父类
function Aaa(){
this.name = '小明';
}
Aaa.prototype.showName = function(){
alert(this.name)
} //子类
function Bbb(){}
//这句话就是类式继承
Bbb.prototype = new Aaa();
//修正指向问题
Bbb.prototype.constructor = Bbb; var b1 = new Bbb();
b1.showName(); //小明
但实际上上面的写法还是有点问题的,假如name是一个数组的时候,父类的属性会被修改,所以例子完善后如下
/*
1、js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的
2、要做属性和方法继承的时候,要分开继承
* */
//父类
function Aaa(){
this.name = [1,2,3];
}
Aaa.prototype.showName = function(){
alert(this.name)
} //子类
function Bbb(){
Aaa.call(this)
} //这个是构造函数,这个函数里面没有任何的属性与方法,避免属性继承
var F = function(){}
F.prototype = Aaa.prototype;
//所以在B接收原型的时候,只能接收方法,不能接收属性
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb; var b1 = new Bbb();
b1.name.push(4); var b2 = new Bbb();
alert(b2.name); //1,2,3
2、原型继承 : 借助原型来实现对象继承对象
var a = {
name : '小明'
}
var b = cloneObj(a);
b.name = "小红" alert(a.name); //小明
alert(b.name); //小红 function cloneObj(obj){
//这种方式就叫做原型继承
var F = function(){};
F.prototype = obj;
return new F();
}
总结:
拷贝继承 : 通用型,有new或无new的时候都可以
类式继承: new构造函数
原型继承: 无new的对象
JS面向对象(二)---继承的更多相关文章
- 捋一捋js面向对象的继承问题
说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...
- js面向对象之继承那点事儿根本就不是事
继承 说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且 ...
- JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...
- JS——面向对象、继承
创建对象的方式: 1)单体 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JS 面向对象之继承 -- 原型链
ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...
- js高程(二)-----继承
首先来讨论一下原型链,上代码 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = fun ...
- js面向对象之继承-原型继承
//animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert(&q ...
- JS 面向对象之继承---多种组合继承
1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; ...
- Js面向对象构造函数继承
构造函数继承 <!-- 创建构造函数 --> function Animal(){ this.species= '动物'; } function Dog(name,color){ this ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
随机推荐
- Python文章导航
1.Python+Eclipse安装.配置: http://www.cnblogs.com/rhyswang/p/8087752.html 2.数学运算及math库: http://www.cnblo ...
- 14.Jmeter聚合报告各项含义
Aggregate Report 是 JMeter 常用的一个 Listener,中文为“聚合报告” Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Na ...
- 接口调用post请求参数在body中
package com.ynhrm.common.utils; import com.alibaba.fastjson.JSONObject; import lombok.Data; import o ...
- Django 同步数据库的时候app中的models的表没有成功创建
出现 no changes detected python3 manage.py makemigrations --empty blog # blog就是你的app名字,此处要写成自己的app名字 ...
- 【目录】ASP.NET Core 基础教程
ASP.NET Core 基础教程 ASP.NET Core 基础教程 ASP.NET Core 简介 ASP.NET Core Windows 环境配置 ASP.NET Core macOS 环境配 ...
- java final关键字详解
final是java中保留关键字,可以声明成员变量.类.方法与本地变量,一旦引用final关键字,将不能再改变这个引用,编译器会检查代码,要是想改变该引用,会报错. final变量? 凡是对成员变量或 ...
- Python之删除字符串中不需要的字符
简单的 str="---你好=====" print(str.strip("-=")) # 你好 从文件中读取多行数据,可以用生成器表达式 with open( ...
- 存储过程分页查询和在ado.net中的使用,返回查询总数
1.创建查询分页的存储过程 CREATE PROCEDURE PageQuery @tableName VARCHAR(),-- 表名 @strWhere VARCHAR(),-- 查询条件 @col ...
- Numpy_key_point
Numpy使用中的一些注意点: ------------------------------------------------------------------------------------ ...
- JavaScript性能优化之摇树
作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...