面向对象
使用实义化的对象
挑战1/1 MAKEPERSON
问题:
构建一个称为makePerson的接受两个参数（name和age）的函数，返回一个对象。此函数会：
- 创建一个空对象；
- 给空对象一个键名为name的属性，键值为输入函数的name参数的值；
- 给空对象一个键名为age的属性，键值为输入函数的age参数的值；
- 返回对象。
题解：
12345678910111213141516171819 |
/**************************************************************** WORKING WITH OBJECT LITERALS****************************************************************//*** CHALLENGE 1 of 1 ***/functionmakePerson(name, age) {// add code hereconst innerObj = {}; innerObj["name"] = name; innerObj["age"] = age;return innerObj;}const vicky = makePerson("Vicky", 24);/********* Uncomment these lines to test your work! *********/console.log(vicky.name); // -> Logs 'Vicky'console.log(vicky.age); // -> Logs 24 |
使用Object.create
挑战1/3 PERSONSTORE
问题：
在personStore对象内，创建greet属性，其值为一个打印“hello”的函数。
题解：
123456789101112131415 |
/**************************************************************** USING OBJECT.CREATE****************************************************************//*** CHALLENGE 1 of 3 ***/const personStore = {// add code here greet: function () {console.log("hello"); },};/********* Uncomment this line to test your work! *********/personStore.greet(); // -> Logs 'hello' |
挑战2/3 PERSONFROMPERSONSTORE
问题：
构建personFromPersonStore函数，接受的参数为name和age。当被调用时，此函数会被通过Object.create方法在personStore对象上创建person对象。
题解：
12345678910111213141516 |
/*** CHALLENGE 2 of 3 ***/functionpersonFromPersonStore(name, age) {// add code hereconst innerObj = Object.create(personStore); innerObj["name"] = name; innerObj["age"] = age;return innerObj;}const sandra = personFromPersonStore("Sandra", 26);// /********* Uncomment these lines to test your work! *********/console.log(sandra.name); // -> Logs 'Sandra'console.log(sandra.age); //-> Logs 26sandra.greet(); //-> Logs 'hello' |
挑战3/3 INTRODUCE
问题：
在不改变上述已写代码的情况下，给personStore对象添加一个用于打印“Hi，my name is [name]”的introduce方法。
题解：
12345678 |
/*** CHALLENGE 3 of 3 ***/// add code herepersonStore["introduce"] = function () {console.log(`Hi, my name is ${this.name}`);};sandra.introduce(); // -> Logs 'Hi, my name is Sandra' |
使用”new“关键词
挑战1/3 PERSONCONSTRUCTOR
问题：
构建PersonConstructor函数。其利用“this”关键词来保存属性到greet作用域上。greet应该是一个打印“hello”字符串的函数。
题解：
1234567891011121314 |
/**************************************************************** USING THE 'NEW' KEYWORD****************************************************************//*** CHALLENGE 1 of 3 ***/functionPersonConstructor() {// add code herethis.greet = () =>console.log("hello");}// /********* Uncomment this line to test your work! *********/const simon = new PersonConstructor();simon.greet(); // -> Logs 'hello' |
挑战2/3 PERSONFROMCONSTRUCTOR
问题：
构建personFromConstructor函数，接受参数为name和age。当被调用时，此函数会使用“new”关键词来创建person对象而不是Object.create方法。
题解：
12345678910111213141516 |
/*** CHALLENGE 2 of 3 ***/functionpersonFromConstructor(name, age) {// add code hereconst innerPerson = new PersonConstructor(); innerPerson.name = name; innerPerson.age = age;return innerPerson;}const mike = personFromConstructor("Mike", 30);/********* Uncomment these lines to test your work! *********/console.log(mike.name); // -> Logs 'Mike'console.log(mike.age); //-> Logs 30mike.greet(); //-> Logs 'hello' |
挑战3/3 INTRODUCE
问题：
在不改变上述已写代码的情况下，给PersonConstructor函数添加一个打印“Hi, my name is [name]”的introduce方法。
题解：
1234567 |
/*** CHALLENGE 3 of 3 ***/// add code herePersonConstructor.prototype.introduce = function () {console.log(`Hi, my name is ${this.name}`);};mike.introduce(); // -> Logs 'Hi, my name is Mike' |
使用ES6的类
挑战1/2 PERSONCLASS
问题：
构建PersonClass类。PersonClass应有一个接受name参数并存储为名为name的属性的构造器。PersonClass还应有一个称为greet的方法，用于打印“hello”字符串。
题解：
123456789101112131415161718192021 |
/**************************************************************** USING ES6 CLASSES****************************************************************//*** CHALLENGE 1 of 2 ***/classPersonClass{constructor(name) {// add code herethis.name = name; }// add code here greet() {console.log("hello"); }}// /********* Uncomment this line to test your work! *********/const george = new PersonClass('');george.greet(); // -> Logs 'hello' |
挑战2/2 DEVELOPERCLASS
问题：
构建DeveloperClass类。DeveloperClass类通过扩展PersonClass类来构造对象。除拥有name属性和greet方法外，DeveloperClass还应有个introduce方法。当被调用时，introduce方法会打印“Hello World, my name is [name]”.
题解：
12345678910111213 |
/*** CHALLENGE 2 of 2 ***/// add code hereclassDeveloperClassextendsPersonClass{ introduce() {console.log(`Hello World, my name is ${this.name}`); }}/********* Uncomment these lines to test your work! *********/const thai = new DeveloperClass("Thai", 32);console.log(thai.name); // -> Logs 'Thai'thai.introduce(); //-> Logs 'Hello World, my name is Thai' |
拓展：子类
挑战1/5 ADMINFUNCTIONSTORE
问题：
构建adminFunctionStore对象，其可以访问userFunctionStore的所有方法，在不将方法逐个于自身内复制的情况下。
题解：
1234567 |
const userFunctionStore = { sayType: function () {console.log("I am a " + this.type); },};let adminFunctionStore = Object.create(userFunctionStore); |
挑战2/5 ADMINFACTORY
问题：
构建adminFactory函数，用于创建一个包含userFactory下所有数据域及默认值的对象，在不将数据域逐个于自身内复制的情况下。
题解：
123456789101112 |
functionuserFactory(name, score) {let user = Object.create(userFunctionStore); user.type = "User"; user.name = name; user.score = score;return user;}functionadminFactory(name, score) {const admin = new userFactory(name, score);return admin;} |
挑战3/5 ADMINFACTORY
问题：
然后确保adminFactory中的type‘域的值为’Admin‘而不是’User’。
题解：
12345 |
functionadminFactory(name, score) {const admin = new userFactory(name, score); admin.type = 'Admin';return admin;} |
挑战4/5 ADMINFACTORY
问题：
确保adminFactory对象可以访问到adminFunctionStore对象中的方法，在不全部复制的情况下。
题解：
123456789101112 |
functionadminFactory(name, score) {let admin = Object.create(adminFunctionStore, { name: { value: name, }, score: { value: score, }, }); admin.type = "Admin";return admin;} |
挑战5/5 SHAREPUBLICMESSAGE
问题：
创建一个打印“Welcome users!”的sharePublicMessage方法，适用于adminFactory对象，但不适用于userFactory对象。请不要在adminFactory中直接添加这个方法。
题解：
12345678910111213141516171819202122232425262728293031 |
const adminFunctionStore = Object.create(userFunctionStore, { sharePublicMessage: { value: function () {console.log("Welcome users!"); }, },});functionadminFactory(name, score) {let admin = Object.create(adminFunctionStore, { name: { value: name, }, score: { value: score, }, }); admin.type = "Admin";return admin;}const adminTester = new adminFactory("Mike", 89);adminTester.sharePublicMessage(); // -> "Welcom users!"console.log(adminTester.type); // -> "Admin"const userTester = new userFactory("June", 90);// userTester.sharePublisMessage(); // -> error!console.log(userTester.type); // -> "User"const adminFromFactory = adminFactory("Eva", 5);adminFromFactory.sayType(); // -> Logs "I am a Admin"adminFromFactory.sharePublicMessage(); // -> Logs "Welcome users!" |
拓展：Mixins
问题：
Mixins是面向对象编程中使对象获得除继承外的方法和属性的工具。在这个挑战中，补充下方代码，使robotFido拥有robotMixin的所有属性。请仅适用一行代码，在不逐个添加属性的情况下。
123456789101112131415 |
classDog{constructor() {this.legs = 4; } speak() {console.log('Woof!'); }}const robotMixin = { skin: 'metal', speak: function() { console.log(`I have ${this.legs} legs and am made of ${this.skin}`) },}let robotFido = new Dog(); |
题解：
123 |
robotFido = Object.assign(robotFido, robotMixin);robotFido.speak(); // -> Logs "I am made of 4 legs and am made of metal" |
