JavaScript学习第一天

学习目标

一、复习

1、JavaScript是什么？

• 是一门脚本语言 · 是一门弱类型语言
• 是一门解释性语言 · 是一门基于对象的语言
• 是一们动态类型语言

2、JavaScript简称：JS

JavaScript的组成

组成部分	说明
ECMAScript	基础的语法
DOM（Document Object Modle）	文档对象模型
BOM（Browser Object Modle）	浏览器对象模型

3、动态网页

1、页面是由html+css+Js

2、向服务器发出请求，服务那边没有页面，是动态的生成，返回给客户端

4、Js最初的目的：解决用户和服务器之间的交互问题
现在： js做特效、游戏、客户端、服务端

5、JS中保留的关键字

JS保留的关键字：int··· 先保留以后可能会用到

6、JS中数据类型

JavaScript 有 5 种简单数据类型：Undefined、Null、Boolean、Number、String 和 1 种复杂数据类型 Object

7、类型检测

• typeof
• instanceof
• Object.prototype.toString.call()

二、面向对象介绍

1、一个具体的看得见摸得着的称作为对象

2、对象是一个容器，封装了属性（property）和方法（method）

3、ECMAScript-262 把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。

面向对象的特性：

• 封装性
• 继承性
• [多态性]

三、面向过程和面向对象区别

面向过程：所有的事情都是亲力亲为，注重的是过程

面向对象：提出需求，找对象，对象解决，注重的是结果

js不是一门面向对象的语言，是基于面向对象的语言，js来模拟面向对象

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

封装：就是包装，把一些重用的内容进行包装，在需要的时候，直接使用 把一个值，存在一个变量中，把一些重用的代码放在函数中，好多相同功能的函数放在一个对象中，把好多功能的对象，放在一个文件中，把一些相同的内容放在一个对象中

继承：类与类之间的关系，js中没有类的概念，js中有构造函数的概念，是可以有继承的，是基于原型

多态：同一个行为，针对不同的对象，产生不同的效果

四、创建对象的三种方式

第一种：字面量创建

var per1 = {}

第二种：调用系统的构造函数

var per2 =new Object();

第三种：自定义构造函数

function Person () {}

var per3 = new Person();

五、this做了几件事

1、开辟空间存储对象

2、把this设置为当前的对象

3、设置属性和方法值

4、返回这个对象

五、显示对象结构

console.dir()

六、构造函数和实例对象的关系

• 总结
• 实例对象和构造函数之间的关系：
• 1、实例对象是通过构造函数来创建的–创建的过程叫做实例化
• 2、如何通过判断判断对象是不是这个数据类型
  • 1、通过构造器的方式 实力对象.构造器==构造器名字
  • 2、对象 instanceof 构造器函数名字
  • 尽可能的使用第二种方式来识别

---

七、构造函数带来的问题

通过自定义构造函数、来创建对象，对象调用的方法不是同一个方法，

它是自己开辟了一块空间指向了自己那块空间的的方法

由于每一个对象开辟了自己的空间指向了自己的方法，占用系统内存

解决办法：通过原型来解决----->数据共享，节省内存空间，作用之一

---

八、原型添加方法

• 通过原型添加方法,解决数据共享,节省内存空间
• 语法：构造函数名字.prototype.方法名/属性 = fn () {};

什么是原型？

实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性——>__proto__——>可以叫做原型对象

构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性——>prototype——>可以叫原型对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSPfZs43-1573311699738)(C:\Users\吴建明\Desktop\SharedScreenshot.jpg)]

原型的补充：

• 原型——> __proto__ 或者是prototype,都是原型对象
• 原型的作用之一：共享数据,节省内存空间

---

九、构造函数和实例对象和原型对象之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6TP4Xtv-1573311699739)(C:\Users\吴建明\Desktop\构造函数和实例对象和原型对象之间的关系.jpg)]

补充自己理解的：

• constructor指向引用的构造函数

• 由于__proto__不是标准的属性：可以省略

• __proto__ 指向的是构造函数原型对象

十、总结三者之间的关系(构造函数,实例对象,原型对象)

• 构造函数可以实例化对象
• 构造函数中有一个属性叫prototype，是构造函数的原型对象
• 构造函数的原型( prototype )中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
• 实例对象的原型对象( __proto__)指向的是该构造函数的原型对象
• 构造函数的原型对象( prototype )中的方法是可以被实例对象直接访问的

十一、什么样子的数据需要写在原型中？

• 需要共享的数据可以写在原型中
• 原型的作用之一：资源共享
• 属性需要共享,方法也需要共享
• 不需要共享的数据写在构造函数中,需要共享的数据写在原型中

十二、简单原型语法

• 构造函数名.prototype = { }

• 注意事项：需要手动修改构造器的指向

十三、原型中的方法，是可以互相访问的

• 原型对象中的方法，可以相互调用的

十四、实例对象使用的属性和方法层层搜索

• 如果实例方法没有，去创建实力对象的构造函数的原型对象中去找

• 实例对象使用的属性或者方法，先从实例中查找，找到了则直接使用，找不到则，去实例对象的 __proto__ 指向的原型对象 prototype 中去找，找到了则使用，找不到报错

十五、为内置对象添加方法

为Array内置对象的原型对象添加方法

Array.prototype.mySort= function (){
    for(var i = 0;i < this.length-1; i++){
        for(var j = 0;j < this.length-1-i;j++){
            if(this[j] > this[j+1]){
                var temp = this[j];
                this[j] = this[j+1]
                this[j+1] = temp;
            }
        }
    }
}

十六、把局部变量变成全局变量

• 如何把局部变量变成全局变量？
• 使用自调用函数把局部变量给window就可以了