Javascript的inheritance 原创邦

Javascript的inheritance

only the properties inside the constructor:

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

The methods are all defined on the constructor's prototype. For example:

Person.prototype.greeting = function() {
  alert('Hi! I\'m ' + this.name.first + '.');
};

create a Teacher constructor

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

the call() function
This function basically allows you to call a function defined somewhere else, but in the current context.
this that you want to use when running the function--Person()
we specify them all as parameters in the call() invocation.

this is just redefining the properties anew

function Brick() {
  this.width = 10;
  this.height = 20;
}

You could inherit the width and height properties by doing this (as well as the other steps described below, of course):

function BlueGlassBrick() {
  Brick.call(this);

  this.opacity = 0.5;
  this.color = 'blue';
}

我们定义了一个新的构造函数constructor,他有个prototype property，只包含一个对象，是一个引用到构造函数自己。

Object.getOwnPropertyNames(Teacher.prototype)

新构造函数不会继承这些方法，怎么继承呢？

Teacher.prototype = Object.create(Person.prototype);

The new object has Person.prototype as its prototype and will therefore inherit, if and when needed, all the methods available on Person.prototype.

After adding the last line, Teacher.prototype's constructor property is now equal to Person(),
because we just set Teacher.prototype to reference an object that inherits its properties from Person.prototype。

Teacher.prototype.constructor === Person()

Object.defineProperty(Teacher.prototype, 'constructor', {
    value: Teacher,
    enumerable: false, // so that it does not appear in 'for in' loop
    writable: true });

Now if you save and refresh, entering Teacher.prototype.constructor should return Teacher(), as desired, plus we are now inheriting from Person()!

也就是说Teacher的constructor 不能替换成了 Person的了。要把constructor改回来。 prototype里面包含了constructor, 复制过来的时候也被复制了，也引用到Person了，改回成Teacher的。

Teacher.prototype.greeting = function() {
  let prefix;

  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
    prefix = 'Mr.';
  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
    prefix = 'Ms.';
  } else {
    prefix = 'Mx.';
  }

  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};

The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.

A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. CoffeeScript for example provides class, extends, etc.

Object member summary

To summarize, you've got four types of property/method to worry about:

Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new keyword, e.g. let myInstance = new myConstructor()).
Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. For example, Object.keys(). These are also known as static properties/methods.
Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. myConstructor.prototype.x().
Those available on an object instance, which can either be an object created when a constructor is instantiated （构造函数实例化）like we saw above (so for example let teacher1 = new Teacher( 'Chris' ); and then teacher1.name), or an object literal (let teacher1 = { name : 'Chris' } and then teacher1.name).

If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.

1. 定义在构造函数里面的会给对象实例。let myInstance = new myConstructor()
2. 定义在构造函数上（on the constructor)的，只能在构造函数里可用。这通常仅仅是浏览器内嵌的对象。 Object.keys() ,这个是静态属性/方法。
3. 定义在构造函数的prototype上的(on the constructor's prototype), 被实例和对象类继承。 myConstructor.prototype.x()
4. 可以通过构造函数创建实例，也可以通过对象语法(an object literal)创建。

ECMAScript 2015 Classes
ECMAScript (or ES) is a general-purpose programming language, standardised by Ecma International according to the document ECMA-262. It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js.

First appeared： 1997; 24 years ago
Typing discipline： weak, dynamic
Paradigm： Multi-paradigm: prototype-based, functional, imperative
Designed by： Brendan Eich, Ecma International

阅读量: 429
发布于: 2021-09-24
修改于: 2021-09-24