JavaScript 中的继承 那些定义在构造器函数中的、用于给予对象实例的。这些都很容易发现 - 在您自己的代码中，它们是构造函数中使用this.x = x类型的行；在内置的浏览器代码中，它们是可用于对象实例的成员（通常通过使用new关键字调用构造函数来创建，例如var myInstance = new myConstructor()）。 那些直接在构造函数上定义、仅在构造函数上可用的。这些通常仅在内置的浏览器对象中可用，并通过被直接链接到构造函数而不是实例来识别。 例如Object.keys()。 那些在构造函数原型上定义、由所有实例和对象类继承的。这些包括在构造函数的原型属性上定义的任何成员，如myConstructor.prototype.x()。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Object-oriented JavaScript inheritance</title> </head> <body> <div> <label for="jscode">Enter code:</label> <input type="text" id="jscode"> <button>Submit code</button> </div> <p></p> </body> <script> const input = document.querySelector('input'); const btn = document.querySelector('button'); const para = document.querySelector('p'); btn.onclick = function() { const code = input.value; para.textContent = eval(code); } // 定义 Person 构造函数 function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; //Person 添加 bio 方法 Person.prototype.bio = function() { // First define a string, and make it equal to the part of // the bio that we know will always be the same. let string = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. '; // define a variable that will contain the pronoun part of // the second sentence let pronoun; // check what the value of gender is, and set pronoun // to an appropriate value in each case if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { pronoun = 'He likes '; } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { pronoun = 'She likes '; } else { pronoun = 'They like '; } // add the pronoun string on to the end of the main string string += pronoun; // use another conditional to structure the last part of the // second sentence depending on whether the number of interests // is 1, 2, or 3 if(this.interests.length === 1) { string += this.interests[0] + '.'; } else if(this.interests.length === 2) { string += this.interests[0] + ' and ' + this.interests[1] + '.'; } else { // if there are more than 2 interests, we loop through them // all, adding each one to the main string followed by a comma, // except for the last one, which needs an and & a full stop for(let i = 0; i < this.interests.length; i++) { if(i === this.interests.length - 1) { string += 'and ' + this.interests[i] + '.'; } else { string += this.interests[i] + ', '; } } } // finally, with the string built, we alert() it alert(string); }; //Person greeting 方法 Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); }; Person.prototype.farewell = function() { alert(this.name.first + ' has left the building. Bye for now!'); } //创建 Person 的实例对象 let person1 = new Person('Tammi', 'Smith', 17, 'female', ['music', 'skiing', 'kickboxing']); //定义 Teacher 的构造函数 function Teacher(first, last, age, gender, interests, subject) { //peeson.call 继承 person 的属性和方法 Person.call(this, first, last, age, gender, interests); //额外的 subject 属性 this.subject = subject; } //设置 Teacher() 的原型和构造器引用 Teacher.prototype = Object.create(Person.prototype); Teacher.prototype.constructor = Teacher; //添加 Teacher 的greeting 的方法 Teacher.prototype.greeting = function() { var 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 = 'Mrs.'; } else { prefix = 'Mx.'; } alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); }; var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics'); </script> </html>
