JavaScript高级之继承、ES5新增方法

超、凢脫俗 2023-02-14 15:56 14阅读 0赞

### JavaScript高级之继承、ES5新增方法 ###

*  JavaScript高级之继承、ES5新增方法
 *   *  1 继承
     *   *  1.1 call()方法
         *  1.2 子构造函数继承父构造函数中的属性
         *  1.3 借用原型对象继承方法
     *  2 ES5新增方法
     *   *  2.1 数组方法forEach遍历数组
         *  2.2 数组方法filter过滤数组
         *  2.3 数组方法some
         *  2.4 some和forEach区别
         *  2.5 trim方法去除字符串两端的空格
         *  2.6 获取对象的属性名
         *  2.7 Object.defineProperty

# JavaScript高级之继承、ES5新增方法 #

## 1 继承 ##

### 1.1 call()方法 ###

call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接。

### 1.2 子构造函数继承父构造函数中的属性 ###

1.  先定义一个父构造函数
2.  再定义一个子构造函数
3.  子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数
     function Father(uname, age) { 
       // this 指向父构造函数的对象实例
       this.uname = uname;
       this.age = age;
     }
      // 2 .子构造函数 
    function Son(uname, age, score) { 
      // this 指向子构造函数的对象实例
      3.使用call方式实现子继承父的属性
      Father.call(this, uname, age);
      this.score = score;
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);

### 1.3 借用原型对象继承方法 ###

1.Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化。该方法不好！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
2. Son.prototype = new Father();如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数。Son.prototype.constructor = Son。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]  
代码如下：

## 2 ES5新增方法 ##

### 2.1 数组方法forEach遍历数组 ###

语法：

> arr.forEach(function(value, index, array) \{  
> //参数一是:数组元素  
> //参数二是:数组元素的索引  
> //参数三是:当前的数组  
> \})  
> //相当于数组遍历的 for循环 没有返回值

输出结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]

### 2.2 数组方法filter过滤数组 ###

输出结果：  
![在这里插入图片描述][20200604102321648.JPG_pic_center]

### 2.3 数组方法some ###

some 查找数组中是否有满足条件的元素。

### 2.4 some和forEach区别 ###

*  如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高。
 *  在forEach 里面 return 不会终止迭代。

### 2.5 trim方法去除字符串两端的空格 ###

var str = ' hello '
    console.log(str.trim()）  //hello 去除两端空格
    var str1 = ' he l l o '
    console.log(str.trim()）  //he l l o 去除两端空格

### 2.6 获取对象的属性名 ###

Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组。

![在这里插入图片描述][20200604102708970.JPG_pic_center]

### 2.7 Object.defineProperty ###

Object.defineProperty设置或修改对象中的属性。

Object.defineProperty(对象，修改或新增的属性名，{ 
    		value:修改或新增的属性的值,
    		writable:true/false,//如果值为false 不允许修改这个属性值
    		enumerable: false,//enumerable 如果值为false 则不允许遍历
            configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200604100751423.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200604100950296.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200604102155291.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[20200604102321648.JPG_pic_center]: https://img-blog.csdnimg.cn/20200604102321648.JPG#pic_center
[20200604102708970.JPG_pic_center]: https://img-blog.csdnimg.cn/20200604102708970.JPG#pic_center