第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();
javascript css html jquery bootstrap vue webpack es6
