高阶JavaScript笔记（三）

洛依尘
96 阅读25分钟

六、面向对象

对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物

  • 用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构：

    • 所以有一些编程语言就是纯面向对象的编程语言，比Java；
    • 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：

  • JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；
  • key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；
  • 如果值是一个函数，那么我们可以称之为是对象的方法；

如何创建一个对象呢？

  • 早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：

    • 这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；

  • 后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：

    • 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；
// 创建一个对象, 对某一个人进行抽象(描述)
// 1.创建方式一: 通过new Object()创建
var obj = new Object()
obj.name = "why"
obj.age = 18
obj.height = 1.88
obj.running = function() {
  console.log(this.name + "在跑步~")
}
​
// 2.创建方式二: 字面量形式
var info = {
  name: "kobe",
  age: 40,
  height: 1.98,
  eating: function() {
    console.log(this.name + "在吃东西~")
  }
}

对属性操作的控制

对属性基本的操作

var obj = {
  name: "why",
  age: 18,
};
​
// 获取属性
console.log(obj.name);
​
// 给属性赋值
obj.name = "kobe";
console.log(obj.name);
​
// 删除属性
delete obj.name;
console.log(obj);
​
// 需求: 对属性进行操作时, 进行一些限制
// 限制: 不允许某一个属性被赋值/不允许某个属性被删除/不允许某些属性在遍历时被遍历出来
​
// 遍历属性
for (var key in obj) {
  console.log(key);
}

Object.defineProperty

如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。

  • 通过属性描述符可以精准的添加或修改对象的属性；
  • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此

对象

可接收三个参数：

  • obj要定义属性的对象；
  • prop要定义或修改的属性的名称或 Symbol；
  • descriptor要定义或修改的属性描述符；

返回值：

  • 被传递给函数的对象。

属性描述符分类

属性描述符的类型有两种：

  • 数据属性（Data Properties）描述符（Descriptor）；
  • 存取属性（Accessor访问器 Properties）描述符（Descriptor）；

image-20220822135251265

数据属性描述符

数据数据描述符有如下四个特性：

  • [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

    • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
    • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；

  • [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；

    • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
    • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

  • [[Writable]]：表示是否可以修改属性的值；

    • 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
    • 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；

  • [[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；

    • 默认情况下这个值是undefined；
// name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
// value: 赋值的value
// configurable: true
// enumerable: true
// writable: true
var obj = {
  name: "why",
  age: 18
}
​
// 数据属性描述符
// 用了属性描述符, 那么会有默认的特性
Object.defineProperty(obj, "address", {
  // 很多配置
  value: "北京市", // 默认值undefined
  // 该特殊不可删除/也不可以重新定义属性描述符
  configurable: false, // 默认值false
  // 该特殊是配置对应的属性(address)是否是可以枚举
  enumerable: true, // 默认值false
  // 该特性是属性是否是可以赋值(写入值) 
  writable: false // 默认值false
})
​
// 测试configurable的作用
delete obj.name
console.log(obj.name)
delete obj.address
console.log(obj.address)
​
Object.defineProperty(obj, "address", {
  value: "广州市",
  configurable: true
})
​
// 测试enumerable的作用
console.log(obj)
for (var key in obj) {
  console.log(key)
}
console.log(Object.keys(obj))
​
// 测试Writable的作用
obj.address = "上海市"
console.log(obj.address)
存取属性描述符

数据数据描述符有如下四个特性：

  • [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

    • 和数据属性描述符是一致的；
    • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
    • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；

  • [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；

    • 和数据属性描述符是一致的；
    • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
    • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

  • [[get]]：获取属性时会执行的函数。默认为undefined

  • [[set]]：设置属性时会执行的函数。默认为undefined

var obj = {
  name: "why",
  age: 18,
  _address: "北京市"
}
​
// 存取属性描述符
// 1.隐藏某一个私有属性被希望直接被外界使用和赋值
// 2.如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符
Object.defineProperty(obj, "address", {
  enumerable: true,
  configurable: true,
  get: function() {
    foo()
    return this._address
  },
  set: function(value) {
    bar()
    this._address = value
  }
})
​
console.log(obj.address)
​
obj.address = "上海市"
console.log(obj.address)
​
function foo() {
  console.log("获取了一次address的值")
}
​
function bar() {
  console.log("设置了addres的值")
}
​
// 获取了一次address的值
// 北京市
// 设置了addres的值
// 获取了一次address的值
// 上海市

同时定义多个属性

Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象

var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {},
  set age(value) {
    this._age = value
  },
  get age() {
    return this._age
  }
}
​
Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "why"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})
​
obj.age = 19
console.log(obj.age)
​
console.log(obj)

对象方法补充

  • 获取对象的属性描述符：

    • getOwnPropertyDescriptor
    • getOwnPropertyDescriptors

  • 禁止对象扩展新属性：Object.preventExtensions

    • 给一个对象添加新的属性会失败（在严格模式下会报错）；

  • 密封对象，不允许配置和删除属性：Object.seal

    • 实际是调用preventExtensions
    • 并且将现有属性的configurable:false

  • 冻结对象，不允许修改现有属性： Object.freeze

    • 实际上是调用seal
    • 并且将现有属性的writable: false
var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {}
}
​
Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "why"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})
​
// 获取某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
console.log(Object.getOwnPropertyDescriptor(obj, "age"))
​
// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))

创建多个对象的方案

如果我们现在希望创建一系列的对象：比如Person对象

  • 包括张三、李四、王五、李雷等等，他们的信息各不相同；
  • 那么采用什么方式来创建比较好呢？

方案一：字面量创建的方式

缺点：重复且麻烦

var p1 = {
  name: "张三",
  age: 18,
  height: 1.88,
  address: "广州市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}
​
var p2 = {
  name: "李四",
  age: 20,
  height: 1.98,
  address: "北京市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

方案二：工厂模式方式

缺点：我们在打印对象时，对象的类型都是Object类型

// 工厂模式: 工厂函数
function createPerson(name, age, height, address) {
  var p = {}
  p.name = name
  p.age = age
  p.height = height;
  p.address = address
​
  p.eating = function() {
    console.log(this.name + "在吃东西~")
  }
​
  p.running = function() {
    console.log(this.name + "在跑步~")
  }
​
  return p
}
​
var p1 = createPerson("张三", 18, 1.88, "广州市")
var p2 = createPerson("李四", 20, 1.98, "上海市")
var p3 = createPerson("王五", 30, 1.78, "北京市")
​
// 工厂模式的缺点(获取不到对象最真实的类型)
console.log(p1, p2, p3)
​
{
  name: '张三',
  age: 18,
  height: 1.88,
  address: '广州市',
  eating: [Function (anonymous)],
  running: [Function (anonymous)]
} {
  name: '李四',
  age: 20,
  height: 1.98,
  address: '上海市',
  eating: [Function (anonymous)],
  running: [Function (anonymous)]
} {
  name: '王五',
  age: 30,
  height: 1.78,
  address: '北京市',
  eating: [Function (anonymous)],
  running: [Function (anonymous)]
}

方案三：构造函数方式

  • 我们先理解什么是构造函数？

    • 构造函数也称之为构造器（constructor） ，通常是我们在创建对象时会调用的函数；
    • 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；
    • 但是JavaScript中的构造函数有点不太一样；

  • JavaScript中的构造函数是怎么样的？

    • 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；
    • 那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数；
function foo() {
  console.log("foo~, 函数体代码")
}
​
// foo就是一个普通的函数
// foo()
​
// 换一种方式来调用foo函数: 通过new关键字去调用一个函数, 那么这个函数就是一个构造函数了
var f1 = new foo
console.log(f1)
​
​
// 当我们通过new去调用一个函数时, 和通过的调用到底有什么区别?
new操作符调用的作用

如果一个函数被使用new操作符调用了，那么它会执行如下操作：

  1. 在内存中创建一个新的对象（空对象）；
  2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；
  3. 构造函数内部的this，会指向创建出来的新对象；
  4. 执行函数的内部代码（函数体代码）；
  5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

image.png

构造函数实现创建多个变量

这个构造函数可以确保我们的对象是有Person的类型的（实际是constructor的属性)

缺点：我们需要为每个对象的函数去创建一个函数对象实例 如每个对象p都有一个一样的eating()

// 规范: 构造函数的首字母一般是大写
function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
​
  this.eating = function() {
    console.log(this.name + "在吃东西~")
  }
​
  this.running = function() {
    console.log(this.name + "在跑步")
  }
}
​
​
var p1 = new Person("张三", 18, 1.88, "广州市")
var p2 = new Person("李四", 20, 1.98, "北京市")
​
console.log(p1)
console.log(p2)
console.log(p1.__proto__ === p2.__proto__); //true
p1.eating()
p2.eating()
console.log(p1.eating() === p2.eating()); //true

// 当创建一个新的foo对象时，会产生一个新的bar函数 十分浪费内存
function foo() {
  function bar() {
​
  }
  return bar
}
​
var fn1 = foo()
var fn2 = foo()
​
console.log(fn1 === fn2)

方案四：构造函数和原型组合

将重复的函数放到Person.prototype的对象上

TP:先看对象原型再来看这个方案

function Person(name, age, height, address) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.address = address;
}
​
Person.prototype.eating = function () {
  console.log(this.name + "在吃东西~");
};
​
Person.prototype.running = function () {
  console.log(this.name + "在跑步~");
};
​
var p1 = new Person("why", 18, 1.88, "北京市");
var p2 = new Person("kobe", 20, 1.98, "洛杉矶市");
​
p1.eating();
p2.eating();
​
console.log(p1.eating() === p2.eating()); // true

对象的原型

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象

  • 当我们通过引用对象的属性key来获取一个value时，它会触发 [[Get]]的操作；
  • 这个操作会首先检查该属性是否有对应的属性，如果有的话就使用它；
  • 如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？

  • 答案是有的，只要是对象都会有这样的一个内置属性；

获取的方式有两种：

  • 方式一：通过对象的 __ proto __ 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
  • 方式二：通过 Object.getPrototypeOf() 方法可以获取到；
// 我们每个对象中都有一个 [[prototype]], 这个属性可以称之为对象的原型(隐式原型)
​
var obj = { name: "why" }; // [[prototype]]
var info = {}; // [[prototype]]
​
// 1.解释原型的概念和看一下原型
// 早期的ECMA是没有规范如何去查看 [[prototype]]
​
// 给对象中提供了一个属性, 可以让我们查看一下这个原型对象(浏览器提供)
// __proto__
console.log(obj.__proto__); // {}
console.log(info.__proto__); // {}
var obj = { name: "why", __proto__: {} };
​
// ES5之后提供的Object.getPrototypeOf
console.log(Object.getPrototypeOf(obj));
​
// 2.原型有什么用呢?
// 当我们从一个对象中获取某一个属性时, 它会触发 [[get]] 操作
// 1. 在当前对象中去查找对应的属性, 如果找到就直接使用
// 2. 如果没有找到, 那么会沿着它的原型去查找 [[prototype]]
// obj.age = 18
obj.__proto__.age = 18;
console.log(obj);
console.log(obj.age);

函数的原型 prototype

所有的函数都有一个prototype的属性!

问题：是不是因为函数是一个对象，所以它有prototype的属性呢？

  • 不是的，因为它是一个函数，才有了这个特殊的属性；
  • 而不是它是一个对象，所以有这个特殊的属性；
var obj = {}  
console.log(obj.prototype); //undefined  obj没有prototype这个属性

function foo() {}
​
// 函数也是一个对象
// console.log(foo.__proto__) // 函数作为对象来说, 它也是有[[prototype]] 隐式原型
​
// 函数它因为是一个函数, 所以它还会多出来一个显示原型属性: prototype
console.log(foo.prototype);
​
// 在new的时候函数的隐式原型会指向他的显示原型 this.__proto__ = foo.prototype
var f1 = new foo();
var f2 = new foo();
​
console.log(f1.__proto__ === foo.prototype);
console.log(f2.__proto__ === foo.prototype);

new操作符

  • 在内存中创建一个新的对象（空对象）；
  • 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；

那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype

function foo() {}
​
// 函数也是一个对象
// console.log(foo.__proto__) // 函数作为对象来说, 它也是有[[prototype]] 隐式原型
​
// 函数它因为是一个函数, 所以它还会多出来一个显示原型属性: prototype
console.log(foo.prototype);
​
// 在new的时候函数的隐式原型会指向他的显示原型 this.__proto__ = foo.prototype
var f1 = new foo();
var f2 = new foo();
​
console.log(f1.__proto__ === foo.prototype);
console.log(f2.__proto__ === foo.prototype);
console.log(f1.__proto__ === f2.__proto__);

创建对象的内存表现

image-20220822144046982

当在p1的原型对象上增加值时

image-20220822144320126

function Person() {}
​
var p1 = new Person();
var p2 = new Person();
​
// 都是为true
console.log(p1.__proto__ === Person.prototype);
console.log(p2.__proto__ === Person.prototype);
​
// p1.name = "why"
// p1.__proto__.name = "kobe"
// Person.prototype.name = "james"
p2.__proto__.name = "curry";
​
console.log(p1.name);  // curry

constructor属性

事实上原型对象上面是有一个属性的：constructor

  • 默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象；
function foo() {}
​
// 1.constructor属性
// foo.prototype这个对象原型 中有一个constructor属性
console.log(foo.prototype);
console.log(Object.getOwnPropertyDescriptors(foo.prototype));
​
Object.defineProperty(foo.prototype, "constructor", {
  enumerable: true,
  configurable: true,
  writable: true,
//  value: "哈哈哈哈",
});
​
console.log(foo.prototype);
​
// prototype.constructor = 构造函数本身
console.log(foo.prototype.constructor); // [Function: foo]
console.log(foo.prototype.constructor.name);
​
// console.log(foo.prototype.constructor.prototype.constructor.prototype.constructor)
​
// 2.•我们也可以添加自己的属性
foo.prototype.name = "why";
foo.prototype.age = 18;
foo.prototype.height = 18;
foo.prototype.eating = function () {};
​
var f1 = new foo();
console.log(f1.name, f1.age);

重写原型对象

如果我们需要在原型上添加过多的属性，通常我们会重新整个原型对象：

// 3.直接修改整个prototype对象
foo.prototype = {
  // constructor: foo,
  name: "why",
  age: 18,
  height: 1.88,
};
​
var f1 = new foo();
​
console.log(f1.name, f1.age, f1.height);
​
// 真实开发中我们可以通过Object.defineProperty方式添加constructor
Object.defineProperty(foo.prototype, "constructor", {
  enumerable: false,
  configurable: true,
  writable: true,
  value: foo,
});

前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；

  • 而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函 数, 而不是Person构造函数了
  • 如果希望constructor指向Person，那么可以手动添加：
  • 默认情况下, 原生的constructor属性是不可枚举的.
  • 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了

image-20220822144853578

面向对象的特性 – 继承

  • 面向对象有三大特性：封装、继承、多态

    • 封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程；
    • 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
    • 多态：不同的对象在执行时表现出不同的形态；

  • 那么继承是做什么呢？

    • 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可。

JavaScript原型链

  • 在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。

    • 我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取：
var obj = {
  name: "why",
  age: 18,
};
​
// [[get]]操作
// 1.在当前的对象中查找属性
// 2.如果没有找到, 这个时候会去原型链(__proto__)对象上查找
​
obj.__proto__ = {};
​
// 原型链
obj.__proto__.__proto__ = {};
​
obj.__proto__.__proto__.__proto__ = {
  address: "上海市",
};
​
console.log(obj.address);

image-20220825113915325

Object的原型

  • Object的原型的就是原型链的尽头也就是最顶层的原型

  • 从Object直接创建出来的对象的原型都是 [Object: null prototype] {}

  • [Object: null prototype] {} 原型有什么特殊吗？

    • 特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
    • 特殊二：该对象上有很多默认的属性和方法；
var obj = { name: "why" };
​
// console.log(obj.address)
​
// 到底是找到哪一层对象之后停止继续查找了呢?
// 字面对象obj的原型是 [Object: null prototype] {}
// [Object: null prototype] {} 就是顶层的原型
console.log(obj.__proto__); // [Object: null prototype] {}
​
// obj.__proto__ => [Object: null prototype] {}
console.log(obj.__proto__.__proto__); // null
​
​

创建Object对象的内存图

image-20220825115522529

原型链关系的内存图

image-20220825115751436

Object是所有类的父类

function Person() {
​
}
​
// console.log(Person.prototype)
// console.log(Object.getOwnPropertyDescriptors(Person.prototype))
​
console.log(Person.prototype.__proto__) // [Object: null prototype] {}
console.log(Person.prototype.__proto__.__proto__) // null
console.log(p1.__proto__.__proto__.constructor);  // [Function: Object]

从我们上面的Object原型我们可以得出一个结论：

  • 在原型链中，原型链顶端一定是Object.prototype，Function.prototype继承它而产生。
  • 一切对象继承自Object.prototype，一切函数对象都继承自Function.prototype(且Function.prototype最终继承自Object.prototype)

image-20220825114638823

为什么要有继承

当两个类很多方法都一样时，重复写太冗余了，定义一个父类，将公共的方法都放在父类中，子类存放自己独有的方法。

// Student
function Student(name, age, sno) {
  this.name = name
  this.age = age
  this.sno = sno
}
​
Student.prototype.running = function() {
  console.log(this.name + " running~")
}
​
Student.prototype.eating = function() {
  console.log(this.name + " eating~")
}
​
Student.prototype.studying = function() {
  console.log(this.name + " studying")
}
​
// Teacher
function Teacher(name, age, title) {
  this.name = name
  this.age = age
  this.title = title
}
​
Teacher.prototype.running = function() {
  console.log(this.name + " running~")
}
​
Teacher.prototype.eating = function() {
  console.log(this.name + " eating~")
}
​
Teacher.prototype.teaching = function() {
  console.log(this.name + " teaching")
}

JavaScript中的继承方案

方案一：原型链继承

将子类的原型直接指向父类new出来的p对象，而因为p对象是父类new出来的，所以p对象的原型指向父类的原型（由上文的new操作符那一章可知）

image-20220825121021957

继承创建对象的内存图

image-20220825121156067

弊端

因为直接将子类的原型指向父类new出来的对象，所以目前有一个很大的弊端：某些属性其实是保存在p对象上的

  • 第一个弊端: 打印stu对象, 继承的属性是看不到的

    • 因为打印stu对象，只会打印stu的内容，不会打印stu原型p对象的内容

  • 第二个弊端: 创建出来两个stu的对象会相互影响

    • 因为这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题

  • 第三个弊端: 在前面实现类的过程中都没有传递参数

    • 因为这个对象是一次性创建的（没办法定制化）；
// 父类: 公共属性和方法
function Person() {
  this.name = "why"
  this.friends = []
}
​
Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}
​
// 子类: 特有属性和方法
function Student() {
  this.sno = 111
}
​
var p = new Person()
Student.prototype = p
​
Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}
​
​
// name/sno
var stu = new Student()
​
// console.log(stu.name)
// stu.eating()
​
// stu.studying()
​
​
// 原型链实现继承的弊端:
​
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
// console.log(stu.name)
​
// 2.第二个弊端: 创建出来两个stu的对象
var stu1 = new Student()
var stu2 = new Student()
​
// 直接修改对象上的属性, 是给本对象添加了一个新属性
stu1.name = "kobe"
console.log(stu2.name)
​
// 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("kobe")
​
console.log(stu1.friends)
console.log(stu2.friends)
​
// 3.第三个弊端: 在前面实现类的过程中都没有传递参数
var stu3 = new Student("lilei", 112)
方案二：借用构造函数继承

  • 为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)

  • 借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数

    • 因为函数可以在任意的时刻被调用；
    • 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；

image-20220825130302114

弊端：

  1. 第一个弊端: 组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数
  2. 第二个弊端: 所有的子类实例事实上会拥有两份父类的属性：一份在当前的实例自己里面(也就是person本身的)，另一份在子类对应的原型对象中(也就是person.__ proto __里面)
// 父类: 公共属性和方法
function Person(name, age, friends) {
  // this = stu
  this.name = name
  this.age = age
  this.friends = friends
}
​
Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}
​
// 子类: 特有属性和方法
function Student(name, age, friends, sno) {
  // 直接将this（此时this是stu对象）和对应参数传给父类，由父类进行赋值操作，但是创建的新值都是在stu对象上的
  Person.call(this, name, age, friends)
  // 相当于下面一样
  // this.name = name
  // this.age = age
  // this.friends = friends
  this.sno = 111
}
​
var p = new Person()
Student.prototype = p
​
Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}
​
​
// name/sno
var stu = new Student("why", 18, ["kobe"], 111)
​
// 强调: 借用构造函数也是有弊端:
// 1.第一个弊端: Person函数至少被调用了两次
// 2.第二个弊端: stu的原型对象上会多出一些属性, 但是这些属性是没有存在的必要
方案三：原型式继承

  • 原型式继承的渊源

    • 这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON的创立者）在2006年写的 一篇文章说起: Prototypal Inheritance in JavaScript(在JS中使用原型式继承)
    • 在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.
    • 为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.

  • 最终的目的：student对象的原型指向了person对象；

// 下面3种都是原型式继承函数
function createObject2(o) {
  function Fn() {}
  Fn.prototype = o;
  var newObj = new Fn();
  return newObj;
}
​
function createObject1(o) {
  var newObj = {};
  Object.setPrototypeOf(newObj, o);
  return newObj;
}
​
// var info = createObject2(obj)
var info = Object.create(obj);

优点：

  1. 父类方法可复用

缺点：

  1. 父类的引用会被所有子类所共享
  2. 子类实例不能向父类传参

方案四：寄生式继承函数

  • 寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(Douglas Crockford)提出和推广的；
  • 寄生式继承的思路是结合原型类继承和工厂模式的一种方式；
  • 即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；
var personObj = {
  running: function () {
    console.log("running");
  },
};
​
// 工厂模式 + 原型式继承
function createStudent(name) {
  var stu = Object.create(personObj);
  stu.name = name;
  stu.studying = function () {
    console.log("studying~");
  };
  return stu;
}
​
var stuObj = createStudent("why");

使用原型式继承对一个目标对象进行浅复制，增强这个浅复制的能力

最终方案：寄生组合式继承

寄生组合式继承，实际是通过借用构造函数来继承属性，通过原型链形式来继承方法。 实质：不必为了指定 子类的原型而调用超类构造函数 ，我们只需超类的原型副本即可——使用寄生式继承 来继承 超类原型 ，然后将结果（实例）指定给子类原型 。

image-20220824230709474

// 原型式继承函数
function createObject(o) {
  function Fn() {}
  Fn.prototype = o;
  return new Fn();
}
​
// SubType子类 SuperType父类
function inheritPrototype(SubType, SuperType) {
  // 创建一个对象，子类的原型指向这个对象并且他的原型指向父类的原型
  SubType.prototype = Object.create(SuperType.prototype);
  // 创建新的对象里面没有constructor，所以要自己创建一个
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType,
  });
}
​
// 父类
function Person(name, age, friends) {
  this.name = name;
  this.age = age;
  this.friends = friends;
}
​
Person.prototype.running = function () {
  console.log("running~");
};
​
Person.prototype.eating = function () {
  console.log("eating~");
};
​
// 子类
function Student(name, age, friends, sno, score) {
  Person.call(this, name, age, friends);
  this.sno = sno;
  this.score = score;
}
​
// 调用函数
inheritPrototype(Student, Person);
​
// 测试
Student.prototype.studying = function () {
  console.log("studying~");
};
​
var stu = new Student("why", 18, ["kobe"], 111, 100);
console.log(stu);
stu.studying();
stu.running();
stu.eating();
​
console.log(stu.constructor.name);  // Student
console.log(stu.__proto__); // Person { studying: [Function (anonymous)] }
console.log(stu.__proto__.__proto__); // { running: [Function (anonymous)], eating: [Function (anonymous)] }

JS原型补充知识点

对象的判断方法补充

  • hasOwnProperty

    • 对象是否有某一个属于自己的属性（不是在原型上的属性）

  • in/for in 操作符

    • 判断某个属性是否在某个对象或者对象的原型上

  • instanceof

    • 用于检测构造函数的pototype，是否出现在某个实例对象的原型链上

  • isPrototypeOf

    • 用于检测某个对象，是否出现在某个实例对象的原型链上
var obj = {
  name: "why",
  age: 18,
};
​
var info = Object.create(obj, {
  address: {
    value: "北京市",
    enumerable: true,
  },
});
console.log(info.address);
console.log(info.__proto__);
​
// hasOwnProperty方法判断
console.log(info.hasOwnProperty("address"));
console.log(info.hasOwnProperty("name"));
​
// in 操作符: 不管在当前对象还是原型中返回的都是true
console.log("address" in info);
console.log("name" in info);
​
// for in 不管在当前对象还是原型中返回
for (var key in info) {
  console.log(key);
}

function createObject(o) {
  function Fn() {}
  Fn.prototype = o;
  return new Fn();
}
​
function inheritPrototype(SubType, SuperType) {
  SubType.prototype = createObject(SuperType.prototype);
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType,
  });
}
​
function Person() {}
​
function Student() {}
      
inheritPrototype(Student, Person);
​
console.log(Person.prototype.__proto__);
​
var stu = new Student();
​
// instanceof 判断对象是否出现在某个原型链中
console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // true
console.log(stu instanceof Object); // true

function Person() {}
​
var p = new Person();
​
console.log(p instanceof Person); // true
console.log(Person.prototype.isPrototypeOf(p)); // true
​
// 创建一个obj对象
var obj = {
  name: "why",
  age: 18,
};
​
var info = Object.create(obj);
​
// console.log(info instanceof obj) // 报错 因为obj不是构造函数
console.log(obj.isPrototypeOf(info)); // true

对象-函数-原型之间的关系总结

对象的原型（隐式原型）
  1. 定义

JavaScript中每个对象都有一个特殊的内置原型属性 [[prototype]]，指向另外一个对象。但是通过Object.getPropertyDescriptors(obj)也无法打印出来原型属性，所以叫做隐式原型，并不是因为该原型不可枚举，而是隐藏起来，要专门方法来调用 在这里插入图片描述

  1. 获取
  • obj.__proto__属性，这个是早期浏览器自己添加的，存在一定的兼容性问题
  • Object.getPrototypeOf(obj)，通用
  1. 作用（沿着原型查找属性）

当我们通过引用对象的一个key来获取value时，实际上会触发[[get]]操作， 1、检查对象上是否有该属性，有的话就使用它 2、如果没有就去对象的原型对象上找，也没有的话去原型对象的原型对象上找，直到顶层原型

const obj = {name: 'xs'};
obj.__proto__.age = 18;
​
console.log(obj.age) //18 
console.log(obj) //{name: 'xs'} 
​
/*注意：
1 引用age属性，触发[[get]]操作，会先去obj的属性里找，没找到；之后去obj原型属性对应的对象上去找，找到了，返回改值
2 age不是obj的属性，是它原型对象上的属性
*/
函数的原型（显式原型）
  1. 定义

函数也是一个对象，所以函数内部也有隐式原型_ _ proto _ _ 此外函数还特有一个显式原型属性prototype，指向另外一个对象 注意显式和隐式原型所指的对象是不同的。对于函数而言，我们着重讨论它的显式原型。

function foo() {}
  • 查看foo函数属性, 可以打印出显式原型属性prototype
console.log(Object.getOwnPropertyDescriprors(foo))
// 结果如下
{
  length: 。。。,  // 参数的个数
  name: 。。。,  // 函数名字
  arguments: 。。。, // 函数参数
  caller: 。。。,
  prototype: { value: {}, writable: true, enumerable: false, configurable: false } 
}
  • 函数原型属性指向一个对象，对象内部有一个constructor属性，又指向该函数 在这里插入图片描述
console.log(Object.getOwnPropertyDescriprors(foo.prototype))
// 结果如下
{
  constructor: {
    value: [Function: foo], // 指回函数对象
    writable: true,        
    enumerable: false,
    configurable: true
  }
}
  1. 获取

显式原型可以直接获取

foo.prototype
  1. 作用（为实例绑定共用函数）

❎注意：在显式原型对象上添加参数，并不会被get操作得到，get依然沿着foo的隐式原型找

function foo(){}
​
foo.prototype.eat = function(){
  console.log('eat')
}
​
// 调用该函数
foo.eat() // 报错，找不到函数
foo.prototype.eat() // 'eat' 可以找到

那显式原型有什么作用呢？ ✅ 当函数作为构造函数时，创建的实例对象的隐式原型指向该函数的显式原型

function foo(){}
const f1 = new foo;//如果不传递参数，也可以不写小括号
const f2 = new foo;
​
console.log(f1.__proto__ ==== foo.prototype) // true
console.log(f1.__proto__ ==== f2.__proto__ ) // true
123456

因此可以在函数原型对象上绑定函数，那么构造的对象都可以共用该函数了，节省内存

foo.prototype.eat = function() {
  console.log('eat');
}
​
f1.eat() // eat
f2.eat() // eat
函数原型和对象原型的关系
function foo() {
}
const f = new foo();
​
console.log(f.__proto__ === foo.prototype);  //ture

对象f是构造函数foo创建的实例对象，上一节讲到，new操作符会进行5步操作，第二步时，会将函数foo.prototype属性赋值给对象的原型属性。所以可以得出结论

实例对象的原型 = 构造函数的原型

原型继承关系

对象里面是有一个__ proto __对象: 隐式原型对象

Foo是一个函数, 那么它会有一个显示原型对象: Foo.prototype

Foo.prototype来自哪里?

答案: 创建了一个函数, Foo.prototype = { constructor: Foo }

Foo是一个对象, 那么它会有一个隐式原型对象: Foo.__ proto __

Foo.__ proto __来自哪里?

答案: new Function() Foo.__ proto __ = Function.prototype

Function.prototype = { constructor: Function }

  • 每个function函数都有它的prototype原型对象
  • 刚开始函数的显示原型prototype指向一个 { constructor: Foo },当new操作符时 Foo.__ proto __ = Function.prototype

image-20220825160051760

原型继承关系

image-20220824232955325

var obj = {
  name: "why",
};
​
console.log(obj.__proto__);
​
// 对象里面是有一个__proto__对象: 隐式原型对象
​
// Foo是一个函数, 那么它会有一个显示原型对象: Foo.prototype
// Foo.prototype来自哪里?
// 答案: 创建了一个函数, Foo.prototype = { constructor: Foo }
​
// Foo是一个对象, 那么它会有一个隐式原型对象: Foo.__proto__
// Foo.__proto__来自哪里?
// 答案: new Function()  Foo.__proto__ = Function.prototype
// Function.prototype = { constructor: Function }
​
// var Foo = new Function()
// function Foo() {}
​
function Foo() {}
​
console.log(Foo.prototype === Foo.__proto__);
console.log(Foo.prototype.constructor);
console.log(Foo.__proto__.constructor);
​
var foo1 = new Foo();
var obj1 = new Object();
​
console.log(Object.getOwnPropertyDescriptors(Function.__proto__));
avatar
文章
阅读
粉丝