课程介绍
<!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>
