Javascript高级第二天笔记

 

 

课程介绍：

重点: 原型链
    * 重点:不同的继承
    * 原型的另一个作用
    * 重点:this指向要知道到底是谁
    *
    * 复习原型
    * 原型链
    * 原型的指向是否可以改变
    * 继承
    * 如何实现继承
    * 原型的方式继承
    * 借用构造函数继承
    * 组合继承
    * 拷贝继承
    *
    * 函数的不同的表现方式
    * 函数的调用的不同的方式
    *
    * this指向
    * 严格模式
    *
    * 函数也是对象---记住就可以了
    * 对象不一定是函数
    *
    * 数组中的函数如何调用
    * apply和call讲了

03原型与原型链

<script>
    //使用对象---->使用对象中的属性和对象中的方法,使用对象就要先有构造函数
    //构造函数
    function Person(name,age) {
      //属性
      this.name=name;
      this.age=age;
      //在构造函数中的方法
      this.eat=function () {
        console.log("吃好吃的");
      };
    }
    //添加共享的属性
    Person.prototype.sex="男";
    //添加共享的方法
    Person.prototype.sayHi=function () {
      console.log("您好啊,怎么这么帅,就是这么帅");
    };
    //实例化对象,并初始化
    var per=new Person("小明",20);
    per.sayHi();
    //如果想要使用一些属性和方法,并且属性的值在每个对象中都是一样的,方法在每个对象中的操作也都是一样,那么,为了共享数据,节省内存空间,是可以把属性和方法通过原型的方式进行赋值

    console.dir(per);//实例对象的结构
    console.dir(Person);//构造函数的结构

    //实例对象的原型__proto__和构造函数的原型prototype指向是相同的

    //实例对象中的__proto__原型指向的是构造函数中的原型prototype
    console.log(per.__proto__==Person.prototype);
    //实例对象中__proto__是原型,浏览器使用的
    //构造函数中的prototype是原型,程序员使用的

    //原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的



  </script>

 图片解析

 

 04原型的指向是否可以改变

 //人的构造函数
    function Person(age) {
      this.age=10;
    }
    //人的原型对象方法
    Person.prototype.eat=function () {
      console.log("人的吃");
    };
    //学生的构造函数
    function Student() {

    }
    Student.prototype.sayHi=function () {
      console.log("嗨,小苏你好帅哦");
    };
    //学生的原型,指向了一个人的实例对象
    Student.prototype=new Person(10);
    var stu=new Student();
    stu.eat();----人的吃
    stu.sayHi();---会报错,应为学生原型指向person,person里面没有sayhi

    //原型指向可以改变
    //实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象
    //构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(__proto__)指向也会发生改变

    //原型的指向是可以改变的
    //实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链

 05原型最终指向了哪里

function Person() {

    }
    Person.prototype.eat=function () {
      console.log("吃东西");
    };

    var per=new Person();
    console.dir(per);
    console.dir(Person);

    //实例对象中有__proto__原型
    //构造函数中有prototype原型
    //prototype是对象
    //所以,prototype这个对象中也有__proto__,那么指向了哪里
    //实例对象中的__proto__指向的是构造函数的prototype
    //所以,prototype这个对象中__proto__指向的应该是某个构造函数的原型prototype

    //Person的prototype中的__proto__的指向
    //console.log(Person.prototype.__proto__);

    //per实例对象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

    console.log(per.__proto__==Person.prototype);    true 
    console.log(per.__proto__.__proto__==Person.prototype.__proto__);     true
    console.log(Person.prototype.__proto__==Object.prototype);       true
    console.log(Object.prototype.__proto__);               null

 

06原型指向和如何添加方法 

function Person(age) {
				this.age=age;
			}
			//人的原型中添加方法
			Person.prototype.eat=function () {
				console.log("一方园地1在吃东西");
			};
			//学生构造函数
			function Student(sex) {
				this.sex=sex;
			}
		
			//学生的原型中添加方法----先在原型中添加方法
			Person.prototype.sayHi=function () {
				console.log("一方园地1");
			};
			
			
			//改变了原型对象的指向
			Student.prototype=new Person(10);
			Student.prototype.eat=function () {
				console.log("一方园地2在吃东西");
			};
			Student.prototype.sayHi=function () {
				console.log("一方园地2");
			};
		
			var stu=new Student("男");
			stu.eat();      //一方园地2吃东西
			stu.sayHi();    //一方园地2

下一个案例重复总结：

function Person(age) {
      this.age = age;
    }

    //指向改变了
    Person.prototype = {
      eat: function () {
        console.log("吃");
      }
    };
    //先添加原型方法
    Person.prototype.sayHi = function () {
      console.log("方园您好");
    };
    var per = new Person(10);
    per.sayHi();          

 上面运行结果是：方园，您好。分析：因为前面虽让指向了一个新的对象，但后面又重新更新了原型，有了新的指向。

那么下面这样改变一下---------->

function Person(age) {
      this.age = age;
    }

    //指向改变了，下面是个大括号，代表着一个对象。
    Person.prototype = {
      eat: function () {
        console.log("吃");
      }
    };
    //先添加原型方法
    Person.prototype.sayHi = function () {
      console.log("方园您好");
    };
		Person.prototype = {
			eat: function () {
				console.log("吃");
			}
		};
    var per = new Person(10);
    per.sayHi();

 上面结果会报错》

为啥会这样？因为指向改变了，大括号代表新的对象,代表对象改变了，之前做的原型吃是没有用的！这句话是仅仅我自己的理解

07实例对象中的和原型对象中的属性重名问题

首先先给你分析一下何为属性：看一下下面的代码

function Person(age,sex) {
   this.age=age;
   this.sex=sex;
   }
    Person.prototype.sex="女";
    var per=new Person(10,"男");
    console.log(per.sex);//男
            
    console.log(per.fy);//undefind
        
        
   console.log(fy);  //报错

//因为JS是一门动态类型的语言,对象没有什么,只要点了,那么这个对象就有了这个东西,没有这个属性,只要对象.属性名字,（例如上面的per.fy）对象就有这个属性了,但是,该属性没有赋值,所以,结果是:undefined.而没有点，（仅仅fy）则没有这个属性,会报错

function Person(age,sex) {
	  this.age=age;
	  this.sex=sex;
	}
	Person.prototype.sex="女";
	var per=new Person(10,"男");
	console.log(per.sex);
	Person.prototype.sex="一方园地";
	   per.sex="二哈";
	   console.log(per.sex);
	
	   console.dir(per);  

此处最后的的per.sex="二哈"; 代表重新更改他的属性sex

//实例对象访问这个属性,应该先从实例对象中找,找到了就直接用，找不到就去指向的原型对象中找,找到了就使用,找不到呢?
//通过实例对象能否改变原型对象中的属性值?不能
//就想改变原型对象中属性的值,怎么办?直接通过原型对象.属性=值;可以改变（就是上面的per.sex=二哈） 

08一个很神奇的原型链

 原型链:实例对象和原型对象之间的关系,通过__proto__来联系

 var divObj=document.getElementById("dv");
  console.dir(divObj);

 //divObj.__proto__---->HTMLDivElement.prototype的__proto__--->HTMLElement.prototype的__proto__---->Element.prototype的__proto__---->Node.prototype的__proto__---->EventTarget.prototype的__proto__---->Object.prototype没有__proto__,所以,Object.prototype中的__proto__是null

09继承

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

 

10继承案例

动物有名字,有体重,有吃东西的行为
小狗有名字,有体重,有毛色, 有吃东西的行为,还有咬人的行为
哈士奇名字,有体重,有毛色,性别, 有吃东西的行为,还有咬人的行为,逗主人开心的行为

function Animal(name,weight) {
	this.name=name;
	this.weight=weight;
}
//动物的原型的方法
Animal.prototype.eat=function () {
	console.log("天天吃东西,就是吃");
};

//狗的构造函数
function Dog(color) {
	this.color=color;
}
Dog.prototype=new Animal("哮天犬","50kg");
Dog.prototype.bitePerson=function () {
	console.log("哼~汪汪~咬死你");
};

//哈士奇
function ErHa(sex) {
	this.sex=sex;
}
ErHa.prototype=new Dog("黑白色");
ErHa.prototype.playHost=function () {
	console.log("哈哈~咬坏衣服,咬坏桌子,拆家..嘎嘎...好玩,开心不,惊喜不,意外不");
};
var erHa=new ErHa("雄性");
console.log(erHa.name,erHa.weight,erHa.color);
erHa.eat();
erHa.bitePerson();
erHa.playHost();