继承

面向对象编程思想: 根据需求, 分析对象, 找到对象有什么特征和行为, 通过代码的方式来实现需求, 要想实现这个需求,就要创建对象 ,要想创建对象, 就应该显示有构造函数, 然后通过构造函数来创建对象, 通过对象调用属性和方法来实现相应的功能及需求, 即可
 

需注意

首先,JS不是一门面向对象的语言, JS是一门基于对象的语言, 那么为什么学习js还要学习面向对象, 因为面向对象的思想适合于人的想法, 编程起来会更加的方便,及后期的维护....
面向对象的编程语言中有类(class)的概念(也是一种特殊的数据类型), 但是JS不是面向对象的语言, 所以, JS中没有类(class), 但是JS可以模拟面向对象的思想编程, JS中会通过构造函数来模拟类的概念(class)
 

面向对象的特性:封装,继承,多态

封装: 就是包装

一个值存储在一个变量中--封装
一坨重复代码放在一个函数中--封装
一系列的属性放在一个对象中--封装
一些功能类似的函数(方法)放在一个对象中--封装
好多相类似的对象放在一个js文件中---封装
 
 

继承:

首先继承是一种关系,类(class)与类之间的关系, JS中没有类, 但是可以通过构造函数模拟类, 然后通过原型来实现继承
继承也是为了数据共享,js中的继承也是为了实现数据共享
原型作用之一:数据共享,节省内存空间
原型作用之二:为了实现继承
 
继承是一种关系:
父类级别与子类级别的关系
 

多态:

一个对象有不同的行为, 或者是同一个行为针对不同的对象, 产生不同的结果, 要想有多态, 就要先有继承, js中可以模拟多态, 但是不会去使用, 也不会模拟
 
 

继承例子:

    //例子:
//人,都有姓名,性别,年龄, 吃饭, 睡觉, 玩
//学生,都有姓名,性别,年龄, 成绩, 吃饭, 睡觉, 玩 ,学习的行为 //js中通过原型来实现继承 function Person(name, age, sex) {
this.name = name;
this.sex = sex;
this.age = age;
}
Person.prototype.eat = function () {
console.log("人可以吃东西");
};
Person.prototype.sleep = function () {
console.log("人在睡觉");
};
Person.prototype.play = function () {
console.log("生活就是不一样的玩法而已");
}; function Student(score) {
this.score = score;
}
//改变学生的原型的指向即可==========>学生和人已经发生关系
Student.prototype = new Person("小明", 10, "男");
Student.prototype.study = function () {
console.log("学习很累很累的哦.");
}; //相同的代码太多,造成了代码的冗余(重复的代码) var stu = new Student(100);
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.eat();
stu.play();
stu.sleep();
console.log("下面的是学生对象中自己有的");
console.log(stu.score);
stu.study();
改变学生的原型的指向后==========>学生和人已经发生关系,产生原型链,则学生里面有人的属性和方法以及自己的属性和方法

 
 

JS高级---继承的更多相关文章

  1. js高级-面向对象继承

    一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...

  2. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  3. js 高级函数 之示例

    js 高级函数作用域安全构造函数 function Person(name, age)    {        this.name = name;        this.age = age;     ...

  4. 《Node.js 高级编程》简介与第二章笔记

    <Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...

  5. 【深入JavaScript】一种JS的继承方法

    这些天读了John Resig的<Secrets of JavaScript Ninja>,其中讨论到JS中实现继承的方案,非常有趣,自己探索了一下,形成了笔记,放到这里. 这个方案在Re ...

  6. js各种继承方式和优缺点的介绍

    js各种继承方式和优缺点的介绍 作者: default 参考网址2 写在前面 本文讲解JavaScript各种继承方式和优缺点. 注意: 跟<JavaScript深入之创建对象>一样,更像 ...

  7. JS高级(摘自简书)

    JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...

  8. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  9. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

随机推荐

  1. spring gzip 静态压缩优化

    HTTP 压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览.相对 于普通的浏览过程HTML ,CSS,Java ...

  2. Wannafly挑战赛13 zzf的好矩阵 题解 答案解释

    Wannafly挑战赛13 zzf的好矩阵 题解 文章目录 Wannafly挑战赛13 zzf的好矩阵 题解 分析 结论1 结论2 结论3 C数组对应带子说明 空白长度论述 后续黑色长度论述 能&qu ...

  3. 剑指offer-面试题28-对称的二叉树-二叉树递归

    /* 题目: 判断给定的二叉树是否对称. */ /* 思路: 1.递归法. 2.基础条件:两棵树均为空为true:一棵树为空,一棵树不为空,为false:两棵树的根节点值不同,为false. 3.其它 ...

  4. WebMethods开发入门

    webMethods  Integration Platform 由用于设计.执行和管理集成解决方案的 3 类组件构成. 设计时组件:这些组件提供了开发和测试集成解决方案的工具. 1.webMetho ...

  5. JavaScript权威指南第6版

    描述网页内容的html,描述网页样式的css,描述网页行为的JavaScript js,适合面向对象和函数式编程风格 es5新特性 第二章 词法结构 1.JavaScript程序是用Unicode字符 ...

  6. R语言函数化学习笔记4

    条件语句和循环语句 当你说话时候用到了如果,此时条件出现了 举个条件函数的例子 sign_t<-function(x){ if(x>0){ return(1) }else if(x< ...

  7. MySQL的操作数据库SQL语法

    MySQL的操作数据库SQL语法 顺序:操作数据库 > 操作数据库中的表 > 操作数据库中的表的数据 MySQL不区分大小写字母 1. 操作数据库 1.创建数据库 2.删除数据库 3.使用 ...

  8. centos因为安装花生壳而无法登录系统的问题

    服务器安装 phddns 花生壳 启动失败,一直卡在启动进度条页面. 解决办法 1.按F5查看卡在什么位置, 2.查看解决方法:程序卡住的情况下,直接备份资料后,卸载程序重启就可以了. 3.进入到si ...

  9. CodeForces - 651C Watchmen (去重)

    Watchmen are in a danger and Doctor Manhattan together with his friend Daniel Dreiberg should warn t ...

  10. 展开折叠效果 height未知 transition无效

    展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...