第9天：原型、继承、函数使用推荐以及this的指向
原型
javascript原型指向改变如何添加方法和访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//构造函数
function Person(age){
this.age = age;
}
//构造函数
function Student(){
this.sayHi = function(){
alert("1");
console.log("学生");
}
this.name = "名字";
}
//实例对象改变原型指向
Student.prototype = new Person(10);
//实例化
var stu = new Student();
//没有返回的值 为undefined
//在调用sayHi()的时候，执行了sayHi()的函数代码
console.log(stu.sayHi());
//要想改变原型后并且调用添加的方法,要在改变指向之后再添加
Student.prototype.sayHell = function(){
console.log("说hello");
}
stu.sayHell();
</script>
</head>
<body>
</body>
</html>
继承
面向对象的特性：封装、继承、多态、（如果是变成语言还有抽象性）;
|继承，类与类之间的关系，面向对象的语言的继承是为了多态服务的
js不是面向对象的语言，但是可以模拟面向对象，模拟继承，为了节省内存空间
继承：
原型的作用：数据共享、继承；目的是：为了节省内存空间；
有几种方式实现：
- 原型继承:改变原型的指向；
- 借用构造函数继承：主要解决属性的问题（原型继承时，初始化对象数据固定(s属性)）
- 组合继承：原型继承+借用构造函数
既然解决属性的问题，又能解决方法问题 - 拷贝继承：就是把对象中需要共享给的属性或者方法，直接遍历的方式复制到另外一个对象中
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//声明构造函数
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
//通过原型添加方法
Person.prototype.play=function(){
console.log("人可以玩");
}
Person.prototype.eat = function(){
console.log("人可以吃东西");
}
Person.prototype.sleep = function(){
console.log("人可以睡觉");
}
//声明构造函数
function Student(scote){
this.scote = scote;
}
//通过原型改变指向,并实例化对象
Student.prototype = new Person("小红",18,"女");
Student.prototype.study = function(){
console.log("需要学习啊");
}
//实例化对象
var stu = new Student(100);
console.log("继承共同属性");
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.play();
stu.eat();
stu.sleep();
console.log("属性student的属性")
stu.study();
</script>
</head>
<body>
</body>
</html>
继承的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//声明动物的构造函数
function Animal(name,weight){
this.name = name;
this.weight = weight;
}
//动物的原型的方法
Animal.prototype.eat = function(){
console.log("会吃东西");
}
//声明Dog的构造函数
function Dog(furColor){
this.furColor = furColor;
}
//改变原型指向，实例化对象,实现继承
Dog.prototype= new Animal("哮天犬","20kg");
Dog.prototype.bite = function(){
console.log("会咬人");
}
//声明二哈的构造函数
function Erha(sex){
this.sex = sex;
}
//g改变原型指向，实例化对象，实现继承
Erha.prototype = new Dog("黑白色");
Erha.prototype.takeDown = function(){
console.log("哼哼~~~~~~~~~~哈哈，，，拆家");
}
//实例化对象
var erHa = new Erha("雄性");
console.log(erHa.name,erHa.weight,erHa.furColor,erHa.sex);
erHa.eat();
erHa.bite();
erHa.takeDown();
</script>
</head>
<body>
</body>
</html>
借用构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//构造函数Person
function Person(name,age,sex){
this.name = name;
this.age= age;
this.sex = sex;
}
//通过原型添加方法
Person.prototype.say=function(){
console.log("你好");
}
//构造函数Student
function Student(name,age,sex,score){
//借用构造函数
Person.call(this,name,age,sex);
this.score=score;
}
var stu = new Student("小明","18","男",100);
console.log(stu.name,stu.age,stu.sex,stu.score);
</script>
</head>
<body>
</body>
</html>
组合继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
/*
原型实现继承
借用构造函数实现继承
组合继承：原型继承+借用构造函数竭诚
*/
//Person构造函数
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex= sex;
}
//原型添加方法
Person.prototype.sayHi=function(){
console.log("你好");
}
//Student构造函数
function Student(name,age,sex,score){
//借用构造函数
//可以继承属性，但是不能继承方法
Person.call(this,name,age,sex)
this.score = score;
}
//通过原型对象改变指向，实现方法的继承
Student.prototype = new Person();
//验证
var stu1 = new Student("小明","18","男",100);
var stu2 = new Student("大明","88","女",90);
console.log(stu1.name,stu1.age,stu1.sex,stu1.score);
console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
</script>
</head>
<body>
</body>
</html>
拷贝继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function Person(){
}
Person.prototype.name = "小明";
Person.prototype.age = 18;
Person.prototype.sayHi = function(){
console.log("你好");
}
//声明空对象
var obj = {};
//用for..in循环复制Person的prototype
for(var key in Person.prototype){
obj[key]=Person.prototype[key];
}
console.dir(obj);
</script>
</head>
<body>
</body>
</html>
函数声明和函数表达式的区别
- 如果以后写函数，最好使用函数表达式，避免出错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//函数的声明如果放在if-else的语句中，
//在IE8的浏览器中会出现问题（建议使用函数表达式）
if(true){
function f1(){
console.log("执行true的");
}
}else{
function f1(){
console.log("执行else的");
}
}
f1();
//测试IE 兼容方式
//最好的方式
//如果以后写函数，最好使用函数表达式，避免出错
if(true){
ff= function f1(){
console.log("执行true的");
};
}
else{
ff= function f1(){
console.log("执行else的");
};
}
ff();
</script>
</head>
<body>
</body>
</html>
关于this指向
普通函数中的this是谁----window
对象.方法中的this是谁————当前的实例对象
定时器方法中的this是谁————window
构造函数中的this是————实例对象
原型对象方法中的this是——实例对象
所有的函数实际上都是Function的构造函数创建出来的对象
var num = new Function("num1","num","return num1+ num2");
"use strict";//严格模式
function f1(){
console.log(this);//window
}
window.f1();
第9天：原型、继承、函数使用推荐以及this的指向的更多相关文章
- Node.js的原型继承函数util.inherits
util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.Jav ...
- Node.js的原型继承函数 util.inherits
转自:http://sentsin.com/web/179.html util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.Java ...
- javascript原型和原型继承
每一个javascript对象(null除外)都和原型对象相关联,每一个对象都从原型对象继承属性. 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过javascript代码Object.p ...
- JavaScript-原型&原型链&原型继承&组合函数
小小的芝麻之旅: 今天学习了js的原型,要说原型,我们先简单说一下函数创建过程. 原型 每个函数在创建的时候js都自动添加了prototype属性,这就是函数的原型,原型就是函数的一个属性,类似一个指 ...
- JS高级. 03 混入式继承／原型继承／经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链
继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- 高级javascript---原型和原型继承
高级javascript---原型和原型继承 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函数用作构造函数 ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- JavaScript的原型继承
JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他 ...
随机推荐
- Mybatis 类的转换器
想一个事情 ,例: 我数据库的表 定义了一个表student 里面有一个字段 stu_sex int类型 可是我对应的实体类是 String 类型或者其他类型 这个时候 实体类与数据库表肯定对应不 ...
- Java io流完成复制粘贴功能
JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{ // 创建输入流要读 ...
- FastDFS 安装与使用
FastDFS 安装与使用 1. 什么是 FastDFS FastDFS是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡的设计. Fa ...
- robot framework踩坑记录
一.报错:FAIL : 'Return' is a reserved keyword. 给Retrun加上中括号即可 二.报错:True != true 三.报错 /Library/Python/2. ...
- springboot多数据源动态切换和自定义mybatis分页插件
1.配置多数据源 增加druid依赖 完整pom文件 数据源配置文件 route.datasource.driver-class-name= com.mysql.jdbc.Driver route.d ...
- JavaScript基础总纲
如果前人种好了树那我们干嘛不去享受阴凉,然后花费时间去为大树的成长进一份力. 我发现一个站点写的很全面写很系统,我总结主要分为一些几个模块: 一,JavaScript 教程(基础) 二,JavaScr ...
- centos7安装配置sql server 2017 linux教程
一.安装教程 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker https://docs.mic ...
- 利用python 学习数据分析 (学习一)
内容学习自: Python for Data Analysis, 2nd Edition 就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...
- P2051 中国象棋
P2051 中国象棋 题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中 ...
- （JAVA作业）练习：创建一个类名为Fruit;包含实例变量：水果名称，颜色，价格，上市月份，有无种子 10个实例：苹果，香蕉，芭乐，柚子，李子，杨桃，猕猴桃，哈密瓜，葡萄，榴莲； 实现功能：提示用户输入水果品种编号，输出该水果的全部信息。
class Lei { String name; String color; int price; int date; int num; String zz; void assemble(){ Sys ...