介绍

面向过程&面向对象

面向对象 - 图1

类 - Class

构造函数

初始化过程

image.png
如果构造函数返回的不是一个对象或函数，则返回创建的新对象（下方代码）

  1. function _new() {
  2.     let target = {}; //创建的新对象
  3.     //第一个参数是构造函数
  4.     let [constructor, ...args] = [...arguments];
  5.     //执行[[原型]]连接;target 是 constructor 的实例
  6.     target.__proto__ = constructor.prototype;
  7.     //执行构造函数，将属性或方法添加到创建的空对象上
  8.     let result = constructor.apply(target, args);
  9.     if (result && (typeof (result) == "object" || typeof (result) == "function")) {
  10.         //如果构造函数执行的结构返回的是一个对象，那么返回这个对象
  11.         return result;
  12.     }
  13.     //如果构造函数返回的不是一个对象，返回创建的新对象
  14.     return target;
  15. }
  16. 因此，我们使用new来调用函数的时候，就会新对象绑定到这个函数的this上。
  17. function sayHi(name){
  18.     this.name = name;
  20. }
  21. var Hi = new sayHi('Yevtte');
  22. console.log('Hello,', Hi.name);
  23. 输出结果为 Hello, Yevtte, 原因是因为在var Hi = new sayHi('Yevtte');这一步，会将sayHi中的this绑定到Hi对象上。

实例成员 & 静态成员

image.png

原型链

原型对象 prototype

image.png
image.png

对象原型 - proto

Star.prototype === ldh.__proto__
image.png

constructor

image.png
一般用 XX.prototype.YY 来给原型添加对象或方法,也可以采用下方式
image.png
对象实例上的constructor通过原型链找原型对象, 再通过原型对象指向构造函数
image.png

完整原型链

image.png

查找机制

image.png

扩展内置对象

image.png

继承

es6之前没有提供extands方法

利用call继承属性

Father.call(this,x,x) 因为call会指向函数, 这里相当于给Son添加了Father的属性 因为this.x添加了新的。
image.png

利用原型对象继承方法

Son.prototype = newFather( ) 这样Son就可以通过prototype指向父亲实例对象，父亲实例对象再通过proto此找到父亲的的原型对象调用方法。

//父对象
function Father(){};
//父对象添加方法
Father.prototype.money = function(){};

//子对象
function Son(){}
//继承父类型方法
Son.prototype = new Father();
//子给自己添加方法 不影响父
Son.prototype.exam = function(){}

原理图
image.png