Javascript高级第一天笔记

01课程介绍

课程介绍:
* 原型及作用
* 小案例--贪吃蛇
* 继承
* 高阶函数
* 内置的方法
* 正则表达式
*

*
* 1.复习-----大量的时间-----半小时
* 2.面向对象和面向过程的编程思想
* 3.对象的创建的三种方式
* 原型的引入-------------------------------原型的作用
* 原型的写法----重点
* 实例对象和构造函数和原型对象三者之间的关系---重点
* 体验面向对象的方式编程的思想----体验的案例---理解
* 原型的简单的语法-----注意的问题
* 随机食物的产生----小例子----能够写出啦

02复习

JavaScript简称:JS
* JS分三个部分:
* 1 ECMAScript标准---基础的语法
* 2 DOM Document Object Model 文档对象模型
* 3 BOM Browser Object Model 浏览器对象模型
* 什么是JS?
* 是一门脚本语言
* 是一门解释性语言
* 是一门弱类型语言
* 是一门基于对象的语言
* 是一门动态类型的语言
*
* 动态页面:页面由html+css+Js
* 向服务器发送请求,服务器那边没有页面,是动态的生成,返回给客户端
*
* js最初的目的:解决用户和服务器之间的交互问题
* js做特效,游戏,移动端,服务端
*

*
* 编程思想:
* 面向过程:所有的事情都是亲力亲为,注重的是过程
* 面向对象:提出需求,找对象,对象解决,注重的是结果
* js不是一门面向对象的语言,是基于对象的语言,js来模拟面向对象
* 面向对象的特性:封装,继承,多态,(抽象性)
* 封装:就是包装,把一些重用的内容进行包装,在需要的时候,直接使用
* 把一个值,存放在一个变量中,把一些重用的代码放在函数中,把好多相同功能的函数放在一个对象中,把好多功能的对象,放在一个文件中,把一些相同的内容放在一个对象中
*
* 继承:类与类之间的关系,js中没有类的概念,js中有构造函数的概念,是可以有继承的,是基于原型
*
* 多态:同一个行为,针对不同的对象,产生了不同的效果

03创建对象的三种方式

/对象:特指的某个事物,具有属性和方法(一组无序的属性的集合)
//特征---->属性
//行为---->方法
//小苏:------>姓名,性别,年龄,吃,睡觉,玩


//创建对象三种方式:

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

//1.实例对象
// var per1={
// name:"卡卡西",
// age:20,
// sex:"男",
// eat:function () {
// console.log("吃臭豆腐");
// },
// readBook:function () {
// console.log("亲热天堂");
// }
// };
//
// //2.调用系统的构造函数
// var per2=new Object();
// per2.name="大蛇丸";
// per2.age=30;
// per2.sex="男";
// per2.eat=function () {
// console.log("吃榴莲");
// };
// per2.play=function () {
// console.log("这个小蛇真好玩");
// };
//
// function Person() {
//
// }
// console.log(per2 instanceof Object);
//
// var dog=new Object();

//3.自定义构造函数（这种方法最好，比前两种创建方法好）
function Person(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
this.play=function () {
console.log("天天打游戏");
};
}
var per=new Person("雏田",18,"女");
console.log(per instanceof Person);

04自定义构造函数创建对象做的事情

function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("您好");
};
}
//创建对象---->实例化一个对象,的同时对属性进行初始化
var per=new Person("小红",20);

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

05工厂模式创建对象

工厂模式和自定义构造函数两者的共同点:都是函数,都可以创建对象,都可以传入参数
*
* 但是区别分别以下：
* 1）工厂模式:
* 函数名是小写
* 有new,
* 有返回值
* new之后的对象是当前的对象
* 直接调用函数就可以创建对象
*
* 2）自定义构造函数:
* 函数名是大写(首字母)
* 没有new
* 没有返回值
* this是当前的对象
* 通过new的方式来创建对象

而我们写的时候是以自定义构造函数的方式来写的

06构造函数和实例对象之间的关系

//面向对象的思想是----抽象的过程---->实例化的过程

//小苏这个人,姓名,年龄,性别, 吃饭,打招呼,睡觉

//自定义构造函数----->实例化对象

//per.eat();//吃
//实例对象是通过构造函数来创建的
//实例对象会指向自己的构造函数(暂时理解,是错误的)
//把这个对象的结构显示出来
console.dir(per);
console.dir(Person);

//实例对象的构造器(构造函数)
//实例对象的构造器是指向Person的,结果是true,所以,这个实例对象per就是通过Person来创建的
console.log(per.constructor==Person);//

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

总结:（上面看不懂没关系，看懂总结就可以了）
/*
* 实例对象和构造函数之间的关系:
* 1. 实例对象是通过构造函数来创建的---创建的过程叫实例化
* 2.如何判断对象是不是这个数据类型?
* 1) 通过构造器的方式实例对象.构造器==构造函数名字
* 2) 对象 instanceof 构造函数名字
* 尽可能的使用第二种方式来识别,为什么?原型讲完再说
*

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

08原型添加方法解决数据共享问题

function Person(name,age) {
this.name=name;
this.age=age;
}
//通过原型来添加方法,解决数据共享,节省内存空间
Person.prototype.eat=function () {
console.log("吃凉菜");
};

var p1=new Person("小明",20);
var p2=new Person("小红",30);
console.log(p1.eat==p2.eat);//true

console.dir(p1);
console.dir(p2);

//实例对象中根本没有eat方法,但是能够使用,这是为什么?

09解释eat方法

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

window是对象
//document是属性,document也是一个对象
//write()是方法
//window.document.write("哈哈");
//对象.style.color=值;

10体会面向过程和面向对象的思想

1. 首先呢,点击按钮,改变div的背景颜色,下面是低级的传统面向过程的思路

2.接下来过渡到面向对象思想----下面是初级的
按钮是一个对象,div是一个对象,颜色是一个属性

3.接下来感受一下:点击btn实现div的多种属性变化这个案例是为了体会高级面向对象的过程思路

（写不出来没关系，看懂40%即可，能看懂大致思路即可，代码要敲一下）

11复习总结原型

实例对象中有两个属性(这两个属性是通过构造函数来获取的),__proto__这个属性
//构造函数中并没有sex和age的两个属性

/*
*
* 实例对象中有个属性,proto,也是对象,叫原型,不是标准的属性,浏览器使用的
* 构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用
*
* 原型---->proto或者是prototype,都是原型对象,
* 原型的作用:共享数据,节省内存空间（这句话要牢牢记住，很重要）

12构造函数和实例对象和原型对象之间的关系

原型的作用之一:共享数据,节省内存空间
//构造函数
function Person(age,sex) {
this.age=age;
this.sex=sex;
}
//通过构造函数的原型添加一个方法
Person.prototype.eat=function () {
console.log("明天中午吃完饭就要演讲,好痛苦");
};

var per=new Person(20,"男");
// per.__proto__.eat();
per.eat();
// per.eat();

//构造函数,原型对象,实例对象之间的关系