web前端 -- Day23 js高级

js基础 JavaScript简称:JS

JS分三个部分:

1. ECMAScript标准—基础的语法
2. DOM Document Object Model 文档对象模型
3. BOM Browser Object Model 浏览器对象模型

什么是JS? 前面的文章有更详细的解释，自行查找

1. 是一门脚本语言
2. 是一门解释性语言
3. 是一门弱类型语言
4. 是一门基于对象的语言
5. 是一门动态类型的语言

动态页面 ：页面由 html + css + js 组成，客户端向服务器发送请求,服务器那边没有页面,是动态的生成,返回给客户端。

js最初的目的 : 解决用户和服务器之间的交互问题。
js现实应用 : 做特效,游戏,移动端,服务端。

编程思想

面向过程:所有的事情都是亲力亲为,注重的是过程。
面向对象:提出需求,找对象,对象解决,注重的是结果。
js不是一门面向对象的语言,是基于对象的语言,js来模拟面向对象。

面向对象的特性:封装,继承,多态,(抽象性)
封装:就是包装,把一些重用的内容进行包装,在需要的时候,直接使用
把一个值,存放在一个变量中,把一些重用的代码放在函数中,把好多相同功能的函数放在一个对象中,把好多功能的对象,放在一个文件中,把一些相同的内容放在一个对象中
继承:类与类之间的关系,js中没有类的概念,js中有构造函数的概念,是可以有继承的,是基于原型
多态:同一个行为,针对不同的对象,产生了不同的效果

创建对象三种方式

1. 字面量的方式
2. 调用系统的构造函数
3. 自定义构造函数方式

// 自定义构造函数方式
function Person (name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function() {
        console.log("你好！！！");
    }
}
// 创建对象 -- 》 实例化一个对象的同时对属性进行初始化
var per = new Person("萌嘟嘟",20,"女");

自定义构造函数方式创建对象都做了哪些工作？？？

1. 开辟空间存储对象
2. 把this设置为当前的对象
3. 设置属性和方法的值
4. 把this对象返回

总结：
共同点： 都是函数，都可以创建对象，都可以传入参数
不同点：
1、工厂模式：函数名是小写的；有new，并且有返回值；new之后的对象是当前的对象；直接调用函数就可以创建对象
2、自定义构造函数方式：函数名是大写的（首字母大写）；没有new，并且没有返回值；this当前的对象；通过new的方式创建对象

实例对象和构造函数之间的关系是什么？？？

1. 实例对象是通过构造函数来创建的—创建的过程叫实例化
2. 如何判断对象是不是这个数据类型?
   (1). 通过构造器的方式 实例对象.构造器==构造函数名字
   (2). 对象 instanceof 构造函数名字,尽可能的使用这种方式来识别

原型 （重点）

通过原型来解决---------数据共享,节省内存空间,作用之一

1. 实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性----->__proto__----->可以叫原型对象。
2. 构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性------>prototype—>可以叫原型对象。
3. 实例对象的__proto__和构造函数中的prototype相等—>true ，又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype ，实例对象的__proto__指向了构造函数的原型对象prototype 。

总结
实例对象中有个属性, __proto__ ,也是对象,叫原型,不是标准的属性,浏览器使用的
构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用

原型： __proto__或者是prototype,都是原型对象,
原型的作用: 共享数据,节省内存空间

构造函数、实例对象、原型对象三者之间的关系？？？

1. 构造函数可以实例化对象
2. 构造函数中有一个属性叫prototype,是构造函数的原型对象
3. 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
4. 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
5. 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

原型语法

function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
//简单的原型写法
Student.prototype = {
      //手动修改构造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("学习好开心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("萌萌哒",18,"girls");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

原型的写法:

1. 构造函数.prototype.属性=值
2. 构造函数.prototype.方法=值 --> 函数.prototype,函数也是对象,所以,里面也有__proto__
3. 实例对象.prototype --> 实例对象中没有这个属性,只有__proto__

原型中的方法,是可以相互访问的。
原型对象中的方法,可以相互调用。

实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用,找不到则,去实例对象的__proto__指向的原型对象prototype中找,找到了则使用,找不到则报错