JavaScript高级

JavaScript高级

ES6中的类和对象

1. 面向对象: 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模版)
2. 对类进行实例化, 获得具体对象.
3. 通过类创建对象

   1. 通过class关键字创建类, 类名我们还是习惯性定义首字母大写

   2. 类里面有个constrator函数, 可以接受传递过来的参数, 同时返回实例对象

   3. constrator函数只要new生成实例时, 就会自动调用这个函数, 如果没有,也会自动生成这个函数

   4. 生成实例new不能省略

   5. 创建类,类名后面不要加小括号, 生成实例 类名后面加小括号,构造函数不需要加function

   6. 多个函数方法之间不需要添加逗号分隔

      <script>
          class Star{
              constructor(uname,age) {
                  this.uname=uname;
                  this.age=age;
              }
              sing(song){
              	console.log(this.uname+'唱'+song)
      		}
          }
          var ldh = new Star('刘德华',18);
          console.log(ldh);
          console.log(ldh.sing('冰雨'));
      </script>
      

4. 类的继承
   1. extends关键子实现继承
   2. super()调用父类的无参构造函数
   3. super.方法名()调用父类的普通方法
   4. super必须放在函数的第一行
   5. 继承中, 如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
   6. 如果子类里面没有, 就去查找父类有没有, 如果有就执行父类的这个方法(就近原则)
   7. insertAdjacentHTML: 可以实现直接把字符串添加到父节点上
5. 构造函数,实例,原型对象三者之间的关系
   1. 构造函数 通过 构造函数名.prototype 指向 原型对象prototype
   2. 原型对象prototype 通过对象名.constrator 指向构造函数
   3. 类似与父与子之间的关系

JS内置对象

1. 数组对象Array方法

   1. forEach(): 遍历数组元素

      <script>
          var arr = [1,2,4,3];
          arr.forEach(function (value,index) {
              console.log(index+':'+value);
          })
      </script>
      

   2. filter(): 过滤,返回一个符合条件的新数组

      <script>
          var arr = [1,2,4,3];
          var newarr = arr.filter(function (value) {
              return value >=3;
          })
          console.log(newarr);
      </script>
      

   3. some(): 返回一个布尔值

      <script>
          var arr = [1,2,4,3];
          var flag = arr.some(function (value) {
              return value == 3;
          })
          flag && alert("天要下雨,故娘要嫁人,随他去吧");
      </script>
      

2. 字符串对象方法
   1. trim(): 取出字符串两端的留白, 并生成一个新字符串
3. 对象方法
   1. Object.keys(): 用于获取对象自身所有的属性, 返回一个由属性名组成的数组
   2. Object.defineProperty()定义新属性或修改原有的属性.
      1. 语法: Object.defineProperty(obj, prop, descriptor)
      2. descriptor:
         1. value: 设置属性的值
         2. writable: 值是否可以重写, true或false
         3. enumerable: 目标属性是否可以被枚举
         4. configurable: 目标属性是否可以被删除或是否可以再次修改
4. 改变函数this指向
   1. call(): 经常用作继承, 传递的参数形式为arg1, arg2
   2. apply(): 经常跟数组有关, 比如借助于数学对象实现数组最大值最小值
   3. bind: 不会调用原来的函数, 可以改变原来函数内部的this指向
5. 高阶函数: 参数或者返回值是一个函数的函数称为高阶函数
6. 闭包: 指有权访问另一个函数作用域中变量的函数.
   1. 作用: 延伸了变量的作用范围
7. 递归: 如果一个函数在内部可以调用其本身, 那么这个函数就是递归函数.
8. 浅拷贝和深拷贝

   1. 浅拷贝复制的对象的地址, 改变里边的值都会变动: Object.assign(target,source);

   2. 深拷贝生成的新对象内容改变不会影响原来的对象

      <script>
          /*通过递归实现深度拷贝*/
          var obj = {
              id: 1,
              name: 'andy',
              msg: {
                  age:18
              },
              color: ['pink', 'red']
          };
          var o ={};
          function deepCopy(newobj, oldobj) {
              for (var k in oldobj){
                  var item = oldobj[k];
                  /*判断这个值是否是数组*/
                  if(item instanceof Array){
                      newobj[k]=[];
                      deepCopy(newobj[k],item);
                      /*判断这个值是否是对象*/
                  }else if (item instanceof Object){
                      newobj[k]={};
                      deepCopy(newobj[k],item);
                      /*属于简单数据类型*/
                  }else {
                      newobj[k] = item;
                  }
              }
          }
      </script>
      

ES的新增语法

1. let: ES6新增的用于声明变量的关键字
   1. 特点: let声明的变量只在所处于的块级有效
2. const: 声明常量, 常量就是值(内存地址)不能变化的量
   1. 特点: 具有块级作用域
   2. 声明常量时必须赋值
   3. 常量赋值后, 值不能修改
3. let const var 的区别
   1. 使用var声明的变量, 其作用域为该语句所在的函数内, 且存在变量提升现象
   2. 使用let声明的变量, 其作用域为该语句所在的代码块内, 不存在变量提升
   3. 使用const声明的是常量, 在后面出现的代码汇总不能再修改该常量的值.
4. 剩余参数: …args
5. 数组合并: let arry3 = […arry1, …arry2] ;
6. 箭头函数: 用来简化书写语法
   1. 语法: const fn = () => {}
   2. 特点:
      1. 函数体中只有一句代码, 且代码的执行结果就是返回值, 可以省略大括号
      2. 如果形参只有一个, 可以省略小括号
      3. 箭头函数不绑定this关键字, 箭头函数中的this, 指向的是函数定义位置的上下文this