René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"谈js继承","articleBody":"##  谈js继承\r\n\r\njs没有提供面向对象编程的语法特性，也没有类的概念。在es6中可以使用class去定义类和继承，但是实际上却没有面向对象多态的这些特性。其底层依然是基于js的原型链去实现的。\r\n\r\njs可以基于Object创建对象(如下)，但是Object本质更像是键值对的哈希对象，所以基于Object字面量和简单的方式创建对象往往无法满足我们要求。\r\n\r\n```\r\nlet o = new Object();\r\nlet p = { name: 'person' };\r\n```\r\n\r\n### 通过函数方式创建对象\r\n通过函数方式也可以很好的创建对象，而且从代码复用性和封装性都比以上方式好。\r\n\r\n```javascript\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n  this.sayName = function (){\r\n    console.log(`${this.type}: ${this.name}`);\r\n  }\r\n}\r\n\r\n// Animal('person'); 与普通函数无异\r\n// new Animal('person'); 返回对象\r\n\r\n```\r\n通过new操作符，经历里一下步骤\r\n\r\n1. 函数创建一个新对象\r\n2. 将函数内部上下文赋予新对象\r\n3. 执行函数代码\r\n4. 返回新建对象\r\n\r\n所以说，通过new方式，我们获得的是这个新创建的对象。因此，可以很方便的创造各种实例，如下：\r\n\r\n```\r\nconst person = new Animal('person');\r\nconst dog = new Animal('dog');\r\n\r\nperson.sayName(); // 输出 person: anonymity\r\ndog.sayName(); // 输出 dog: anonymity\r\n```\r\n但是其实很快就有新的问题，\r\n\r\n```\r\nperson.sayName === dog.sayName\r\n// 输出false\r\n```\r\n\r\n我们发现对于某些可以复用的代码，实际上重复执行了，说白了就是，sayName函数实际上只需要存在一份即可，但是实际运行过程中，不同实例都声明了不同的函数。这实际不是一个优雅的方式。所以引出下一个概念，原型链。\r\n\r\n### 原型对象\r\n希望读者先区分构造函数和实例两个不同的名词，首先，如果细心就会发现，对于元生对象如Object， Array之类的（本质依然是function）构造函数，都具有prototype属性。像我们自己定义的Animal函数，也具有一个prototype属性。\r\n这个prototype属性指向的是原型对象的引用。每一个函数在创建过程中，会生成一个原型对象，同时，构造函数本身的prototype属性指向这个原型对象。细心点也会发现，通过new创建的实例person，dog具有__proto__属性。这是一个已废弃的属性，但是它的存在说明了实例上面也有指向原型对象的引用。不推荐用__proto__访问原型对象，那有什么办法可以访问实例的原型对象。可以通过Object.getPrototypeOf(person)方式获得实例的原型对象，实例的原型对象和构造函数的原型对象是不是一致的，答案是肯定的。\r\n```\r\nObject.getPrototypeOf(person) === Animal.prototype\r\n// true\r\n```\r\n同时，原型对象上有constructor属性是指向构造函数本身的。\r\n```\r\nAnimal.prototype.constructor === Animal\r\n// true\r\n```\r\n所以可以总结为,当函数被创建时，会有一个prototype属性指向一个生成的原型对象, 并且原型对象具有指回构造函数的引用contructor属性。当通过构造函数创建实例时，实例也拥有指向原型对象的属性（即实例可以追溯原型对象）。\r\n\r\n### 原型对象作用之共用公共属性\r\n在别的语言里可以通过static声明公共的属性，js的原型对象有这样用处。因为实例访问属性的过程中，会遍历自身属性，如果没有会追溯原型链的属性。也就是说，实例可以访问到原型对象上的属性。同时所有实例共享同一个原型对象。\r\n```\r\nObject.getPrototypeOf(person) === Object.getPrototypeOf(dog);\r\n\r\n// true\r\n```\r\n这也就达到一份代码可以多实例复用的要求。所以构造函数写成:\r\n```javascript\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n}\r\nAnimal.prototype.sayName = function (){\r\n  console.log(`${this.type}: ${this.name}`);\r\n}\r\nAnimal.prototype.publicProper = 'p';\r\n```\r\n\r\n如果希望构造函数看上去封装性更好，可以优化\r\n\r\n```javascript\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n\r\n  if (typeof this.sayName !== 'function') {\r\n    Animal.prototype.sayName = function (){\r\n      console.log(`${this.type}: ${this.name}`);\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### 原型对象作用二之继承\r\n讲了这么久，才到真正要讨论的内容，因为js真正属于面向对象特性的还是继承。有以上基础其实可以很简单的实现继承。最简单，最直接一般都是这样做\r\n\r\n```javascript\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n\r\n  if (typeof this.sayName !== 'function') {\r\n    Animal.prototype.sayName = function () {\r\n      console.log(`${this.type}: ${this.name}`);\r\n    }\r\n  }\r\n}\r\n\r\nfunction Person(type, name) {\r\n  this.name = name | 'anonymity';\r\n}\r\n\r\nPerson.prototype = new Animal('person');\r\n```\r\n这样最简单的继承就实现了，但是这种继承方式存在缺点。\r\n\r\n1. 因为子类Person的原型是Animal的实例，所Person创建的实例也包含了Animal实例的属性，Person不同实例共用Animal的实例属性。是不是有办法，当Animal的实例属性继承下来是Person的实例属性。\r\n\r\n2. Animal构造函数是有参数的，这种方式因为是公用的，所以我们继承new Animal时候没有传参数name，因为我们默认Animal的name属性是需要覆盖的。明显这样写法灵活性不够。或者说，如果希望type, name属性依然是实例属性，实际上继承Animal构造函数的代码没有复用到。\r\n\r\n3. 子类新原型对象并没有constructor属性指回构造函数，与原生方式不同。\r\n\r\n### 借用父类构造函数\r\n\r\n可以通过在子类中调用父类构造函数，并且改变作用域，将实例属性赋值到子类的实例属性上\r\n\r\n```javascript\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n\r\n  if (typeof this.sayName !== 'function') {\r\n    Animal.prototype.sayName = function () {\r\n      console.log(`${this.type}: ${this.name}`);\r\n    }\r\n  }\r\n}\r\n\r\nfunction Person(name) {\r\n  this.job = null;\r\n  Animal.call(this, 'person', name);\r\n}\r\n\r\nPerson.prototype = new Animal();\r\nPerson.prototype.constructor = Person;\r\n\r\nconst p = new Person('peter');\r\n\r\np.sayName();\r\n\r\n// Person peter\r\n```\r\n\r\n这样实现，大体上是已经很完美了, 但是依然有不足，一个是构造函数执行两次，所以原型属性上和实例属性上重复了。为了解决这个问题，我们最直观的想法时就是创建一个空对象并且，然后将原型上的内容复制到空对象上。实际上，我们一个可以创建一个空白构造函数，并且使其原型为父类原型，再将空白对象实例作为之类原型即可。用代码直观点：\r\n\r\n```javascript\r\nfunction objectCreate(proto) {\r\n  function F(){};\r\n  F.prototype = proto;\r\n  return new F();\r\n}\r\n// 继承代码改写为\r\nfunction Animal(type, name) {\r\n  this.type = type || 'animal';\r\n  this.name = name || 'anonymity'\r\n\r\n  if (typeof this.sayName !== 'function') {\r\n    Animal.prototype.sayName = function () {\r\n      console.log(`${this.type}: ${this.name}`);\r\n    }\r\n  }\r\n}\r\n\r\nfunction Person(name) {\r\n  this.job = null;\r\n  Animal.call(this, 'person', name);\r\n}\r\n\r\nPerson.prototype = objectCreate(Animal.prototype);\r\nPerson.prototype.constructor = Person;\r\n\r\nconst p = new Person('peter');\r\np.sayName();\r\n// Person peter\r\n```\r\n当然es5中已经提供了object.create()方法。\r\n\r\n到此，继承的所有讨论就结束了，在es6，和ts已经这么普及的今天，讨论这一个老生常谈的问题，有必要吗？我觉得还是有必要的，第一，我觉得对于这样问题，并不是所有人都真正的理解其中的含义。第二，我觉得只要浏览器没有完全支持新语法，那么意味着我们最终跑得前端代码依然是很原始的代码，在这个角度去理解这些代码是有益的。最后，我个人也觉得，对于继承这个话题，在红皮书上有各种各样的定义，很多人太拘泥于它的命名，反而忽视了一些内容背后解决的问题，这些命名其实是从英文在通过翻译者翻译，并不是真正需要去理解的东西。\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","author":{"url":"https://github.com/wython","@type":"Person","name":"wython"},"datePublished":"2019-07-19T08:44:13.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/5/wython.github.io/issues/5"}