ES5

末蓝、 2024-02-19 17:02 23阅读 0赞

#### ES5 ####

*   *  严格模式
     *   *  1.变量必须用var定义
         *  2.改变eval变量的作用域
         *  3.禁止自定义函数中的this指向window
         *  4.严格模式下对象属性不能重名
     *  JSON对象
     *   *  1.json概念
         *  2.JSON对象与js对象的相互转换：
     *  Object对象扩展
     *   *  1.Object.create(prototype, descriptions)
         *  2.Object.defineProperties(object, description)
         *  3.普通对象的get和set方法
     *  数组的操作
     *   *  1.indexof(value)获取value在数组中第一次出现的下标
         *  2.lastIndexOf(value)获取value在数组中最后一次出现的下标
         *  3.遍历数组中的元素forEach()
         *  4.构建新的数组map()
         *  5.数组过滤
     *  函数的扩展
     *   *   *  1.call()
             *  2.apply()
             *  3.bind()
     *  回调函数

### 严格模式 ###

在js代码最前面使用`’use strict’`启用严格模式。

#### 1.变量必须用var定义 ####

下面这种形式没有使用**var**关键字定义，严格模式下，该文件会报错。

// 会报错
    'use strict';
    username = 'zhangsan';
    console.log(username); // 打印username的值

严格模式下必须使用**var**关键字定义变量：

// 不会报错
    'use strict';
    var username = 'zhangsan';
    console.log(username);

#### 2.改变eval变量的作用域 ####

没有使用严格，eval()函数中定义的变量将是全局的

var str = 'var a = 10; alert(a)';
    eval(str);
    // 这里可以使用eval()中定义的a变量
    console.log(a)

如果使用了严格模式，eval()函数中定义的变量仅限于eval()函数中使用。

'use strict';
     var str = 'var a = 10; alert(a)';
     eval(str);
     // 变量a是在eval()函数中定义的，使用了严格模式a变量不能直接使用
     console.log(a)

#### 3.禁止自定义函数中的this指向window ####

非严格模式下,函数中的this是指向window的：

function fun(name, age) {
        
    	 this.name = name;
         this.age = age;
     }
     fun('zs', 18);
     console.log(this.name)
     console.log(this.age)

在严格模式下，函数中的this必须是对应的实例对象：

'use strict'
    function fun(name, age) {
        
         this.name = name;
         this.age = age;
     }
     // 构造实例对象
     var f = new fun('zs', 18);
     // 访问实例对象的属性
     console.log(f.name)
     // 严格模式，this不指向window，所以window中没有age属性
     console.log(window.age)

#### 4.严格模式下对象属性不能重名 ####

非严格模式下，下面是没有语法错误的：

var obj = {
        
       username: 'zs',
           username: 'lisi'
       };

但是在严格模式下，是有语法错误的！

### JSON对象 ###

#### 1.json概念 ####

JSON：JavaScript 对象表示法（JavaScript Object Notation）。JSON本质是一个字符串，但是JSON对象字符串是以\{开头\}结束，JSON数组对象是以\[开头，\]结束。JSON对象的属性值的表示方式是键值对我方式，键和值都是用""引起来。  
例如JSON对象：

{
        "username":"zs","age":18}

JSON数组：

["a","b","c"]

JSON对象数组：

[{
        "username":"zs","age":18},{
        "username":"zs","age":18},{
        "username":"zs","age":18}]

#### 2.JSON对象与js对象的相互转换： ####

js对象转换成JSON对象：

var o = {
        
    	username: 'zs',
        age: 18
    };
    JSON.stringify(o)

JSON对象转换成js对象

### Object对象扩展 ###

#### 1.Object.create(prototype, descriptions) ####

#### 2.Object.defineProperties(object, description) ####

#### 3.普通对象的get和set方法 ####

var obj = {
        
        username: 'zs',
    	password: '12345',
        // 添加了一个info属性，这个属性也是惰性的
        get info() {
        
            return "这是info属性"
        },
        set info(data) {
        
            console.log("为info属性设置值", data)
        }
    }
    obj.info = "hhh"
    console.log(obj.info);
    console.log(obj)

### 数组的操作 ###

#### 1.indexof(value)获取value在数组中第一次出现的下标 ####

var arr = [1, 3, 5, 7, 9, 7, 5, 3, 1];
    // 获取3在数组arr第一次出现的下标，这里应该是1
    var indexof = arr.indexOf(3)
    console.log(indexof);

#### 2.lastIndexOf(value)获取value在数组中最后一次出现的下标 ####

var arr = [1, 3, 5, 7, 9, 7, 5, 3, 1];
    // 获取3在数组arr最后一次出现的下标，这里应该是7
    var lastIndexOf = arr.lastIndexOf(3)
    console.log(lastIndexOf);

#### 3.遍历数组中的元素forEach() ####

var arr = [1, 3, 5, 7, 9, 7, 5, 3, 1];
    // 遍历数组arr中元素
    arr.forEach(function(item, index) {
        
        console.log(index + " -> ", item);
    })

#### 4.构建新的数组map() ####

#### 5.数组过滤 ####

// 数组的过滤
    var arr2 = arr.filter(function(item, index) {
        
    	// 返回数组中值比下标大的数
        return item > index;
    });
    console.log(arr2);

### 函数的扩展 ###

下面这个函数中的this默认是window对象

function fun(data) {
        
    	console.log("data->", data);
    	console.log("this->", this); // 这里的this是window对象
    }
    fun("123")

##### 1.call() #####

使用call()方法可以改变函数中this的指向，如下fun函数中的this就指向了obj对象。

var obj = {
        username: 'zs', age: 19};
    function fun(data1, data2) {
        
      console.log("data1->", data1);
      console.log("data2->", data2);
      console.log("this->", this); // 这里的this是window对象
    }
    // 函数会立即执行
    fun.call(obj, "12345");

##### 2.apply() #####

##### 3.bind() #####

bind()不同于apply()和call()，函数使用bind，函数不会被立即执行。并且bind()方法会返回一个新的函数。

var obj = {
        username: 'zs', age: 19};
     function fun(data1, data2) {
        
       console.log("data1->", data1);
       console.log("data2->", data2);
       console.log("this->", this); // 这里的this是window对象
     }
     var bindFun = fun.bind(obj);
     // 这样也能传参
     bindFun('1', 2);

bind时传参：

例如在使用定时器时，回调函数中的this是指向window的，我们可以通过bind()将this指向指定的对象：

var obj = {
        username: 'zs', age: 18}
    // 改变this的指向，使this指向obj这个对象
    setTimeout(function() {
        
        console.log(this)
    }.bind(obj), 1000);

### 回调函数 ###

最简的回调函数的理解：

// 定义一个函数，这个函数接收一个函数作为回调函数
    function fun(callback) {
        
    	if (callback instanceof Function) {
        
              callback();
          } else {
        
              throw callback + "不是一个函数";
          }
     }
     // 定义一个函数
     function fun1() {
        
         console.log("回调")
     }
     // 调用接收回调函数的函数
     fun(fun1);
     // 如果传入的不是函数，抛出了异常
     fun(11);