js高级第一题学习笔记

系列文章目录

---

---

一、面向对象与面向过程

1.面向过程

• 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候在一个一个的调用

2.面向对象

• 面向对象是把事务分解为一个个对象，然后优对象之间分工与合作

3.面向对象与面向过程对比

将大象装进冰箱，面向过程做法

• 1.打开冰箱门

• 2.大象装进去

• 3 关上冰箱门

将大象装进冰箱，面向对象做法

• 1.大象对象 进去
• 2.冰箱对象 开门 关门
• 3.使用大象和冰箱的功能

二、对象与类

1.对象

对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

1.1创建对象

字面量创建对象
var ldh = { name: '刘德华', age: 18 }
console.log(ldh);
构造函数创建对象
function Star(name, age) {
 this.name = name; 
 this.age = age; 
 }
 实例化对象
var ldh = new Star('刘德华', 18)  console.log(ldh);

2.类

• 在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实 例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个， 通过类实例化一个具体的对象
• 个人理解为构造函数的思想，把公共样式提取出来，
• 且在类中，函数没有function关键字

2.1 创建类

语法：

步骤1 使用class关键字
 class name { 
 // class body
  }
  步骤2使用定义的类创建实例 注意new关键字 
  var xx = new name()

示例

1 创建一个类class 与构造函数一个意思 类名第一个字母必须大写
 class Star {  
 类的共有属性放到 constructor 里面 constructor 为构造器或者构造函数，与构造函数理念一至
 
 constructor(name, age) { 
 this.name = name; 
 this.age = age; } 
 }
 在类class里，语法规定方法之间不能加逗号
 sing(song) {
 console.log(this.uname + '唱' + song);
 }
 2 利用new关键字来实例化对象
 var ldh =new Star('刘德华',18)
 console.log(ldh);  Star {uname: "刘德华", age: 18}
 ldh.sing('冰雨');  刘德华唱冰雨
 

• 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
• 类里面有个constructor 函数(构造器，构造函数),可以接受传递过来的参数,同时返回实例对象
• constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个 函数,类也会自动生成这个函数
• 多个函数方法之间不需要添加逗号分隔
• 生成实例 new 不能省略
• 语法规范, 创建类 类名后面不要加小括号,生成实例时类名后面加小括号, 构造函数不需 要加function

2.2 类的继承

语法：

父类
class Father{ }
子类
class Son extends Father { }

es6语法中 类中必须要写construtor属性，但是不写也不会报错

2.3 super关键字

在继承中，super在子类中代表父类

创建父类：
 class Father {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
        sum() {
          console.log(this.d + this.f);
        }
      }
创建子类：
      class Son extends Father {
        constructor(x, y) {
        必须加  super(x, y);
          this.x = x;
          this.y = y;
        }

        }
      }


创建实例：
      var s1 = new Son(1, 2);
子类使用父类的方法      
      console.log(s1.sum());  

• 在es6语法中，继承中子类的constructor方法必须添加super属性，代表父类，可以调用父类的方法，也可通过spuer传参数给父类
• 并且super必须写在this之前，不然会报错

总结

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行 子类的
2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这 个方法(就近原则)
3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用 父类的构造函数,super 必须在子类this之前调用
4. 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.
5. constructor中的this指向的是new出来的实例对象
6. 自定义的方法,一般也指向的new出来的实例对象
7. 绑定事件之后this指向的就是触发事件的事件源
8. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象