JavaScript高级学习（一）

JS基础大纲复习

JavaScript简称JS

JS分为三部分

• 1.ECMAScript标准----基础的语法
• 2.DOM Document Object Model------文档对象模型
• 3.BOM Browser Object Model-------浏览器对象模型

什么是JS？

• 是一门脚本语言
• 是一门解释性语言
• 是一门弱类型语言
• 是一门动态类型语言

动态页面：（可分为两种）

• 1.HTML+CSS+JS
• 2.向服务器发送请求，服务器那边没有页面，是动态的生成，返回给浏览器

JS最初的目的：

解决用户和服务器之间的交互问题；做特效、游戏，移动端、服务端

JS的发展历史：LiveScript，与Java无关

基本概念：

1. 语法：
区分大小写
标识符
注释
严格模式
语句
2. 关键字和保留字
3. 变量
4. 数据类型Typeof()：
简单数据类型Undefined、Null、Boolean、String、Number、复杂数据类型Object

• 基本类型（值类型）
  Undefined
  Null
  Boolean
  String
  Number
• 复杂类型（引用类型）
  Object
  Array
  Date
  RegExp
  Function
  基本包装类型：Boolean、Number、String
  单体内置对象：Global、Math
• 类型检测
  typeof：检测变量什么类型
  instanceof：判断当前对象是否为这种数据类型
  Object.prototype.toString.call()：学习原型后讲
• 值类型和引用类型在内存中的存储方式
  值类型按值存储
  引用类型按引用存储：地址在栈，对象在堆
• 值类型复制和引用类型复制
  值类型按值复制
  引用类型按引用复制
• 值类型和引用类型参数传递
  值类型按值传递
  引用类型按引用传递：地址传递
• 值类型和引用类型的差别
  基本类型在内存中占据固定大小的空间，因此被保存在栈内存中
  从一个变量向另一个变量复制基本类型的值，复制的是值得副本
  引用类型的的值是对象，保存在堆内存
  包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针

5. 操作符：
加减乘除取余等
6. 流程控制语句
if if else else 等
7. 函数

JS的执行过程

1.预解析（变量和函数的声明提前）

• 全局预解析：所有变量和函数的声明提前，同名的函数和变量函数的优先级高
• 函数内部解析：所有的变量、函数和形参都会参与预解析
  函数
  形参
  普通变量

2.执行：
先预解析全局作用域，然后执行全局作用域中的代码
在执行全局代码的过程中遇到函数调用就会先进行函数预解析，然后再执行函数内代码

JS面向对象编程（面向对象编程简称OOP）

什么是对象？
具体特指某个事物拥有属性property和方法method（无序属性集合）
什么是面向对象？

• 面向过程：所有的事情都是亲力亲为，注重过程
• 面向对象：提出需求，找对象，对象解决，注重结果
• JS不是面向对象语言，是基于对象语言，JS模拟面向对象

面向对象的特性： 封装、继承、多态、（抽象性）

• 封装：就是包装，把一些重用的内容进行包装，在需要的时候，直接使用，把一个值，存放在一个变量中，把一些重用的代码放在函数中，把好多相同功能的函数放在一个对象中，把好多功能的对象，放在一个文件中，把一些相同的内容放在一个对象中。
• 继承：类与类之间的关系，JS中没有类的概念，JS有构造函数的概念，是可以有继承的，是基于原型
• 多态：同一个行为，针对不同的对象，产生了不同的效果

面向对象与面向过程：

• 面向过程就是亲力亲为
• 面向对象就是找个对象，指挥得结果
• 面向对象将执行者转变为指挥者
• 面向对象不是面向过程的代替，而是面向过程的封装（升级）

程序中面向对象的基本体现
JS中，所有的数据类型都可以视为对象，当然也可以自定义对象
自定义的对象数据类型就是面向对象中的Class类的概念
面向对象设计思想：

• 抽象出Class
• 根据Class创建Instance
• 指挥Instance得结果

创建对象：

对象：特指的某个事物，具有属性和方法（一组无序属性的集合 ）
特征： 属性
行为： 方法
创建对象的三种方式：

• 字面量的方式

//实例对象 
	var per1={ 
	     name:"卡卡西", 
		 age:20, 
	 	 sex:"男", 
	 	 eat:function () { 
	  		console.log("吃臭豆腐"); 
		 }, 
		readBook:function () { 
		console.log("亲热天堂"); 
	} 
	 }; 

• 调用系统的构造函数

//调用系统的构造函数 
	 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); // per2数据类型是否为Object
	console.log(per2 instanceof Person); //false
 	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); 

实例化一个对象的同时对属性进行初始化

• 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 per2=createObject(“小明”,20);

工厂模式和自定义构造函数的异同：

• 共同点：都是函数，都可以创建对象，都可以传入参数
• 不同点：
  工厂模式 ：函数名首字母是小写；有new；有返回值；new之后的对象是当前对象；直接调用函数就可以创建对象
  自定义函数：函数名首字母大写；无new；无返回值；this是当前的对象；通过new的方式创建对象

构造函数和实例对象之间的关系：
面向对象的思想是：抽象------->实例化的过程
自定义构造函数-----实例化对象
先构造函数在实例化对象，实例对象是通过构造函数来创建的，实例对象会指向自己的构造函数

//自定义构造函数----->实例化对象
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.eat=function () {
        console.log("吃大蒜拌臭豆腐加榴莲酱");
      };
    }
    //构造函数---->创建对象
    var per=new Person("小苏",38,"女");
    //per.eat();//吃
    //实例对象是通过构造函数来创建
    //实例对象会指向自己的构造函数(暂时理解,是错误的)
    //把这个对象的结构显示出来
    //console.dir()------显示结构
    console.dir(per);
    console.dir(Person);
    //实例对象的构造器(构造函数) 
	//实例对象的构造器是指向Person的,结果是true,所以,这个实例对象per就是通过Person来创建的 
	console.log(per.constructor==Person);// true

如何判断对象是不是这个数据类型？

• 构造器的方式：实例对象.构造器==构造函数名字
• 对象 instanceof 构造函数名字（尽可能使用）

构造函数创建对象带来的问题：

//第一种问题
 function Person(name,age) {
     this.name=name;
      this.age=age;
      this.eat=function () {
        console.log("今天吃红烧土豆");
      }
    }
    var per1=new Person("小白",20);
    var per2=new Person("小黑",30);
	per1.eat();
    per2.eat();   //不是同一个方法
    console.log(per1.eat==per2.eat);//false
    //会实现100次eat方法，浪费内存
	for(var i=0;i<100;i++){
      var per=new Person("嘎嘎",20);
      per.eat();
    }
//第二种问题：同一种方法，但命名冲突
function myEat() {
  console.log("吃大榴莲");
}
var myEat=10;
function Person(name,age) {
  this.name=name;
  this.age=age;
  this.eat=myEat;
}
var per1=new Person("小白",20);
var per2=new Person("小黑",30);
   

引入原型解决构造函数创建对象带来的问题
原型作用：
数据共享、节省内存空间