JavaScript

JavaScript对象

对象的分类

内建对象
- 由ES标准中定义的对象，在任何的ES实现中都可以使用
- 比如：String Number Boolean Function
宿主对象
- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
- 比如：BOM DOM
自定义对象
- 由开发人员自己创建的对象

操作JavaScript对象

创建一个对象

<script type="text/javascript">
    //创建对象
    var obj = new Object();
</script>

使用对象字面量来创建一个对象

<script type="text/javascript">
    var obj = {}
</script>

//在创建对象时直接指定属性
<script type="text/javascript">
    var obj = {
        name:"江劲炜",
        age: 21
    }
</script>

添加属性

<script type="text/javascript">
    ...
    /**
    * 在对象中保存的值称为属性
    * 向对象中添加属性
    * 语法：对象.属性名 = 属性值
    * 
    * JS对象的属性值，可以是任意的数据类型
    */

    //向obj中添加一个name属性
    obj.name = "江劲炜"
    //向obj中添加一个gender属性
    obj.gender = "男"
    //修改name属性
    obj.name = "jjw"
</script>

读取对象中的属性

<script type="text/javascript">
    ...
    /**
    * 读取对象中的属性
    * 语法：对象.属性名
    * 如果读取对象中不存在的属性，不会报错，而是返回undefined
    */
    console.log(obj.name);
</script>

删除对象的属性

<script type="text/javascript">
    ...
    /**
    * 删除对象的属性
    * 语法：delete 对象.属性名
    */
    delete obj.name;
</script>

操作特殊名称的属性名

<script type="text/javascript">
    /**
    * 如果要使用特殊的属性名，不能采用.的方式操作
    * 需要使用[]的方式进行操作
    * 语法： 对象["属性名"]
    */
    obj["123"] = 456
    console.log(obj["123"]);
</script>

判断对象是否含有某个属性

<script type="text/javascript">
    /**
    * in 运算符
    * 		通过该运算符可以检查一个对象中是否含有指定的属性
    * 		语法："属性名" in 对象
    */
    var obj = new Object();
    console.log("test" in obj)
</script>

枚举对象中的属性

使用for in语句可以枚举对象中的属性

<script type="text/javascript">
    var obj = new Object();
    //每次执行时会将对象中的一个属性名赋值给变量
    for(var n in obj){
        console.log(obj[n])
    }
</script>

JavaScript函数

函数

函数也是一个对象
函数中可以封装一些功能，在需要时可以执行这些功能
函数中可以保存一些代码，在需要的时候调用

使用函数

创建一个函数对象


<script type="text/javascript">
    //使用构造方法创建函数对象
    //可以将要封装的代码以字符串形式传递给构造函数
    var fun = new Function("console.log('hello');");
    fun();

    /**
    * 使用函数声明来创建一个函数
    * 语法：function 函数名(形参...){ ... }
    */
    function fun(){
        console.log("hello");
    }
    fun();
    
    /**
    * 使用函数表达式来创建一个函数
    * 语法：var 函数名 = function(形参...){ ... }
    */
    var fun = function(){
        console.log("hello");
    }
    fun();
    
    //创建一个匿名函数(立即执行函数)
    (function(){
        alert("我是匿名函数")
    })();
</script>

函数的参数

形参相当于在函数内部声明了对应的变量
实参可以为任何值

<script type="text/javascript">
    /**
    * 可以在函数()中指定一个或多个形参
    */
    var fun = function(a,b){
        console.log(a+b);
    } 
    fun(1,2); // 3
    
    //多余实参不会被赋值
    fun(1,2,3,4);
</script>

函数的返回值

返回值可以是任意的数据类型，也可以是一个对象
也可以是一个函数

<script type="text/javascript">
    var fun = function(a,b){
        var d = a+b;
        return d;
    }
    var d = fun();
    
    //返回一个函数
    var fun = function(){
        function fun2(){
            ...
        }
        return fun2;
    }
    var d = fun();
</script>

对象中的函数

函数也可以作为对象的一个属性

<script type="text/javascript">
    var obj = new Object();
    obj.fun = function(){
        ...
    }
    obj.fun();
</script>

作用域

作用域值一个变量的作用范围
在JS中一共由两种作用域
1. 全局作用域
  - 直接编写在script标签中的JS代码，都在全局作用域
  - 全局作用域在页面打开时创建，关闭时销毁
  - 全局作用域中有一个一共全局对象window，代表浏览器窗口，可以直接使用
  - 全局作用域中创建的对象都会作为window对象的属性保存，创建的函数都会作为window对象的方法保存
2. 函数作用域
  - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
  - 每调用一次函数就创建一个新的函数作用域，之间是相互独立的
  - 在函数作用域中要访问全局变量可以使用window对象
  - 在函数中不使用var声明的变量都会成为全局变量
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    function fun(){
    d = 500;
    }
    fun();
    console.log(d) //500
    </script>

变量的声明提前

使用var关键字声明的变量，会在所有的代码执行之前呗声明

console.log(a);
var a = 123;
//报错

var a;
console.log(a);
a = 123;
//不会报错

//这两段代码是一样的

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数this，this指向的是函数执行的上下文对象

根据函数的调用方式不同，this会指向不同的对象

以函数形式调用this指向window

function fun(){
	console.log(this);
}
fun(); //[Object Window]

var obj = {
	fun2:fun
}
obj.fun(); //[Object Object]

//谁调用的指向谁

创建对象的问题

使用工厂模式创建对象

通过该方法可以批量创建对象
通过工厂模式创建的对象都是Object类型，导致不能区分类型

<script type="text/javascript">
    function createPerson(name,age){
        //创建一个新的对象
        var obj = new Object();

        //向对象中添加属性
        obj.name = name;
        obj.age = age;

        //将新的对象返回
        return obj;
    }

    var obj = createPerson("jjw",21);
</script>

使用构造函数创建对象

创建一个构造函数，专门用来创建Person对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别
构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数的执行流程

立即创建一个新的对象
将新建的对象设置为函数中this
逐行执行函数中的代码
将新建的对象作为返回值返回

<script type="text/javascript">
    function Person(name){
        this.name = name
    }
    var person = new Person("jjw"); //类型为Person
</script>

原型对象

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
如果函数作为普通函数调用，prototype没有任何作用
当函数通过构造函数调用时，所创建的对象中都会有一个隐含属性，指向该构造函数的原型对象，我们可以通过_proto_来访问该属性
1
2
var person = new Person();
console.log(person._proto_ == Person.prototype)
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象；我们可以将对象中共有的内容，统一设置到原型对象中

当我们访问对象的一个属性或方法时，会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找

Person.prototype.a = "jjw"
var p1 = new Person();
var p2 = new Person();

p1.a = "江劲炜";

console.log(p1.a); //江劲炜
console.log(p2.a); //jjw

我们创建构造函数时，可以讲这些对象共有的属性和方法，统一添加到构造函数的原型对象中（类似于Java静态方法）
1
2
3
Person.prototype.fun = function(){
...
}

JavaScript数组

JavaScript正则表达式

DOM

DOM

DOM全称 Document Object Model 文档对象模型
- 文档：整个html网页文档
- 对象：将网页中的每一个部分都转换为了一个对象
- 模型：使用模型来表示对象之间的关系，方便我们获取对象
JS中通过DOM来对HTML文档进行操作

文档对象

节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以成为是一个节点
比如：html标签、属性、文本、注释、整个文档都是一个节点
虽然都是节点，但实际上他们的具体类型是不同的
比如：标签我们称为元素节点、属性称为属性节点
节点类型不同，属性和方法也不同

浏览器中已经给我们提供了文档节点，这个对象是window属性，可以直接再页面中使用，文档节点代表的是整个网页

示例：通过id属性获取一个对象

<body>
    <button id="btn"></button>
</body>  
<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.innerHTML = "我是按钮";
</script>

获取元素节点

通过document对象调用

getElementById()：通过id属性获取一个元素节点对象
getElementsByTagName()：通过标签名获取一组元素节点对象
getElementsByName()：通过name属性获取一组元素节点对象

getElementById()

<body>
    <button id="btn"></button>
</body>  
<script type="text/javascript">
    var btn = document.getElementById("btn"); //获取到id为btn的按钮
</script>

getElementsByTagName()

<body>
    <button></button>
    <button></button>
    <button></button>
</body>  
<script type="text/javascript">
    var btns = document.getElementsByTagName("button"); //获取到标签名为button的标签类数组对象
    console.log(btns[1]) //打印出类数组对象的第一个标签
</script>

getElementsByName()

<body>
    <button name="test"></button>
</body>  
<script type="text/javascript">
    var btn = document.getElementsByName("test"); //获取到name属性为test的标签类数组对象
</script>

获取元素子节点

通过具体的元素节点调用

getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
childNodes：属性，表示当前节点的所有子节点
firstChild：属性，表示当前节点的第一个子节点
lastChild：属性，表示当前节点的最后一个子节点

childNodes

childNodes属性会获取包括文本节点在内的所有节点（包括回车）

<ul id="testul">
    <li></li>
    <li></li>
    <li></li>
</ul>

<script type="text/javascript">
    var ul = document.getElementById("testul");
    var lis = ul.childNodes;
    console.log(lis[0]); //返回TEXT（回车）
</script>

事件对象

事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript 与HTML之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件︰点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

示例：为按钮绑定一个点击事件

<body>
    <button id="btn"></button>
</body>  
<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        ...
    };
</script>

文档的加载顺序

JS文件的加载顺序是从上往下加载的如果script标签写在head标签中可能会出现问题，这时我们可以使用 window 对象的 onload事件，这个事件会在页面加载完成后触发