课程介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 课程介绍:
* 原型及作用
* 小案例--贪吃蛇
* 继承
* 高阶函数
* 内置的方法
* 正则表达式
*/
</script>
<script>
/**
* 1.复习--大量的时间----半个小时
* 2.面向对象和面向过程的编程思想
* 3.对象创建的三种方式
* 原型的的引入----原型的作用
* 原型的写法----重点
* 实例对象和构造函数和原型对象三者之间的关系--重点
* 体验面向对象的方式编程的思想--体验的案例--理解
* 原型的简单的语法--注意的问题
* 随机食物的产生----小例子--能够写出来
*/
</script>
</head>
<body>
</body>
</html>
复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 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中有构造函数的概念,是可以有
* 继承的,是基于原型的
*
* 多态:同一个行为,针对不同的对象,产生了不同的效果
*
*/
</script>
</head>
<body>
</body>
</html>
创建对象的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 对象:特指的某个事物,具有属性和方法(一组无序属性的集合)
// 特征---->属性
// 行为---->方法
// 小苏:---->姓名,性别,年龄,吃,睡觉,玩
// 创建对象的三种方式:
// 1 字面量的方式
// 2 调用系统的构造函数
// 3 自定义构造函数
// 实例对象
// var per1 = {
// name:"卡卡西",
// age:20,
// sex:"男",
// eat:function(){
// console.log("吃臭豆腐");
// },
// readBook:function(){
// console.log("亲热天堂");
// }
// };
// // 调用系统的构造函数
// var per2 = new Object();
// per2.name = "大蛇丸";
// per2.age = 29;
// per2.sex = "男";
// per2.eat = function(){
// console.log("吃榴莲");
// };
// per2.play = function(){
// console.log("这个小蛇真好玩");
// };
// function Person(){
// }
// console.log(per2 instanceof Object);
// var dog = new Object();
// 自定义构造函数
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);
</script>
</head>
<body>
</body>
</html>
自定义构造函数创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
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的对象返回
*
*/
</script>
</head>
<body>
</body>
</html>
工厂模式创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function(){
console.log("您好");
};
return obj;
}
var per1 = createObject("小明",20);
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log("您好");
};
}
// 创建对象---->实例化一个对象,同时对属性进行初始化
var per = new Person("小红",20);
/**
* 共同点:都是函数,都可以创建对象,都可以传入参数
*
* 工厂模式:
* 函数名是小写
* 有new,
* 有返回值
* new之后的对象是当前的对象
* 直接调用函数就可以创建对象
*
* 自定义构造函数
* 函数名是大写(首字母)
* 没有new
* 没有返回值
* this是当前的对象
* 通过new的方式来创建对象
*
*/
</script>
</head>
<body>
</body>
</html>