复习
Javascript简称:JS
JS分三个部分
1.ECMAScript标准---基础的语法
2.DOM Document Object Model 文档对象模型
3.BOM Browser Object Model 浏览器对象模型
定义:
是一门脚本语言
是一门解释性语言
是一门弱类型的语言
是一门基于对象的语言
是一门动态类型的语言
动态页面:
页面由HTML、CSS、JS组成
或向服务器发送请求,服务器没有页面,但动态生成该页面,返回给客户端
JS最初的目的:解决用户与服务器之间的交互问题
现在:JS做特效、游戏、移动端、服务端
JS的数据类型:
简单(值类型):Undefined、Null、Boolean、Number、String
复杂(引用类型):Object、Array、Date、RegExp、Function
单体内置对象:Global、Math
各数据类型数据存储位置
值类型----------------------->栈
引用类型-------------------->引用-栈、值-堆
数据传递
值类型---------------->值
引用类型------------->地址
预解析
1.全局解析(所有变量和函数的声明都会提前;同名的函数和对象,函数的优先级高)
2.函数内部预解析(所有变量、函数、形参都会参与预解析)
执行流程:
先预解析全局作用域,然后执行全局作用域中的代码
在执行全局代码的过程中遇到函数调用就会先进行函数预解析,然后再执行函数内代码
对象:
是一个特指的事物,具有属性和方法
是一个无序属性的集合
是一个容器,封装了属性(property-特征、状态)和方法(method-行为)
编程思想:
面向过程:所有事情亲历亲为,注重的是过程
面向对象(OOP):提出需求,找相应对象解决,注重结果
js不是面向对象语言,而是基于对象的语言,js模拟面向对象
面向对象的特性:
封装(包装-把重复的代码封到函数里,提高代码利用率)
继承(类与类的关系,js没有类的关系,js有构造函数的概念,基于原型)
多态(同一个行为,针对不同的对象,产生不同的效果)
创建对象的三种方式
1. 字面量的方式
var person = {
name: "小明";
.......
};
2. 调用系统的构造函数
var jack = new Object();
jack.sex = "男";
..........
3. 自定义构造函数
function Person(name,....){
this.name = name;
.............
};
var jack = new Person("jack",.....);
创建对象时系统做了什么?
1.开辟空间存储对象
2.把this设置为当前的对象
3.设置属性和方法的值
4.把this对象返回
工厂模式创建对象
function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function(){
console.log("你好");
};
return obj;
};
var person1 = createObject("小明","18");
构造函数和实例对象之间的关系
1.实例对象是通过构造函数创建的---创建的过程叫做实例化
2.如何判断对象是不是这个数据类型?
1)通过构造器的方式==》实例对象.构造器 == 构造函数的名字
2)对象 instanceof 构造函数名字 //推荐使用
构造函数创建对象带来的问题:
每创建一个对象,都会为构造函数内的方法开辟独立空间,容易造成空间浪费
解决:
1.可以将方法封装成函数放到外面 //不好,容易命名冲突
2.用原型解决
原型
---->__proto__或prototype;都是原型对象
作用:
1.数据共享、节省内存空间
通过原型为构造函数添加方法
//构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
//通过构造函数的原型添加方法
Person.prototype.eat = function(){
console.log("haha");
};
var per1 = new Person("小白",20);
var per2 = new Person("小黑",25);
console.log(per.__proto__.constructor==Person.prototype.constructor);==>true
console.log(per.eat==per2.eat); ==>true
console.dir(Person)
实例对象中有两个属性(通过构造函数获取的)
构造函数中并没有name、age属性
实例对象中有个__proto__,也是对象,叫原型,不是标准的属性,浏览器使用
构造函数有个prototype,也是对象,叫原型,是标准属性,程序员使用
构造函数、实例对象和原型之间的关系
1.构造函数创建实例对象
2.构造函数有prototype属性---->原型对象
3.原型对象内有constructor构造器---->构造函数
4.原型对象内有方法
5.实例对象有__proto__属性---->原型对象===》调用原型对象内方法
总结:
构造函数可以实例化对象
构造函数中有一个属性叫prototype,是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(__proto__)指向的是该创建其的构造函数的原型对象
构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
自我理解:实例对象是构造函数的复制体,其复制了构造函数所拥有的属性(包括prototype属性及其对原型的指向),
实例对象可调用prototype的复制体__proto__指向的原型所拥有的方法
简单的原型写法
Person.prototype = {
//必须手动修改构造器的指向
constructor:Person,
height:"170",
weight:"60kg",
study:function(){
console.log("学习好开心啊!!");
},
};
原形对象中的方法,可以互相调用
实例对象使用的属性或方法,先在实例对象中查找,找到了则直接使用;
找不到则去实例对象的__proto__指向的原型对象prototype中找,找到则使用,否则报错
为内置对象添加原型方法
Array.prototype.myReverse = functions(){
for(var i = this.length-1;i>0;i--){
console.log(this[i]);
}
};
...............
---------------------------------------------------------------------------
把局部变量变成全局变量–>把局部变量给window就好
//函数的自调用
//一次性函数,声明的同时直接调用
(function(win--形参){
var num = 10; //局部变量
win.num = num;
console.log("函数");
})(window--实参);
console.log(window--num/num); ====>报错
-----------------------------------------------------------------------------------------------
<script>
//产生随机数对象
(function (window) {
function Random(){}
Random.prototype.getRandom = function(min,max){
return Math.floor(Math.random()*(max-min)+min);
};
window.Random = new Random();
})(window);
(function(window){
console.log(Random.getRandom(0,10));
})();
</script>