01课程介绍
课程介绍:(fy)
* 原型及作用
* 小案例--贪吃蛇
* 继承
* 高阶函数
* 内置的方法
* 正则表达式
*
*
* 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();
//构造函数,原型对象,实例对象之间的关系
13总结以上三者之间的关系 (很重要)
构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
14利用原型对象分享数据
什么样子的数据是需要写在原型中?
//需要共享的数据就可以写原型中
//原型的作用之一:数据共享
//属性需要共享,方法也需要共享
//不需要共享的数据写在构造函数中,需要共享的数据写在原型中
//构造函数
15原型的简单语法
1.首先原始的原型写的零散。看下面
2.现在来学习一下原型的简单语法,把所有的方法写在一起,但是唯一的要注意的是:需要在原型函数里面 手动添加构造器constructor指向谁,如下红色框出来的提示,这个地方构造器千万不要漏掉。
16.原型中的方法是可以相互访问的
1.实例对象的方法,是可以相互调用的
2.原型中的方法,是可以相互访问和调用的
17实例对象使用属性和方法层的使用搜索
实例对象使用的属性或者方法,先在实例对象中查找,找到了则直接使用,找不到则,
去实例对象的__proto__指向的原型对象prototype中找,找到了则使用,找不到则报 错,这个查找过程是原型链。
18为内置对象添加原型方法
我们能否为系统的对象的原型中添加方法,相当于在改变源码
//eg.我希望字符串中有一个倒序字符串的方法
19把局部变量变成了全局变量
综上所述:如何把局部变量变成全局变量?
把局部变量给window就可以了(浏览器中顶级对象是window)
20把随机对象暴露给window成为全局对象
1.首先学一下随机函数在(0,5)之间的表达:Math.floor(Math.random()*5) floor为向下取整
那么要是在一个范围呢比如(20,50)的表达是:Math.floor(Math.random()*(50-30)+30)
总结在一个范围之间(min,max)的表达是:Math.floor(Math.random()*(max-min)+min)