@冒泡的马树
题库原地址:http://csbin.io/oop
面向对象
应用实义化的对象
挑战1/1
问题:
构建一个称为makePerson的承受两个参数(name和age)的函数,返回一个对象。此函数会:
- 创立一个空对象;
- 给空对象一个键名为name的属性,键值为输出函数的name参数的值;
- 给空对象一个键名为age的属性,键值为输出函数的age参数的值;
- 返回对象。
题解:
/**************************************************************** WORKING WITH OBJECT LITERALS****************************************************************//*** CHALLENGE 1 of 1 ***/function makePerson(name, age) { // add code here const 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对象内,创立greet属性,其值为一个打印“hello”的函数。
题解:
/**************************************************************** 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函数,承受的参数为name和age。当被调用时,此函数会被通过Object.create办法在personStore对象上创立person对象。
题解:
/*** CHALLENGE 2 of 3 ***/function personFromPersonStore(name, age) { // add code here const 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
问题:
在不扭转上述已写代码的状况下,给personStore对象增加一个用于打印“Hi,my name is [name]"的introduce办法。
题解:
/*** 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函数。其利用“this"关键词来保留属性到greet作用域上。greet应该是一个打印“hello”字符串的函数。
题解:
/**************************************************************** USING THE 'NEW' KEYWORD****************************************************************//*** CHALLENGE 1 of 3 ***/function PersonConstructor() { // add code here this.greet = () => console.log("hello");}// /********* Uncomment this line to test your work! *********/const simon = new PersonConstructor();simon.greet(); // -> Logs 'hello'
挑战2/3
问题:
构建personFromConstructor函数,承受参数为name和age。当被调用时,此函数会应用“new”关键词来创立person对象而不是Object.create办法。
题解:
/*** CHALLENGE 2 of 3 ***/function personFromConstructor(name, age) { // add code here const 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
问题:
在不扭转上述已写代码的状况下,给PersonConstructor函数增加一个打印“Hi, my name is [name]"的introduce办法。
题解:
/*** 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应有一个承受name参数并存储为名为name的属性的结构器。PersonClass还应有一个称为greet的办法,用于打印“hello”字符串。
题解:
/**************************************************************** USING ES6 CLASSES****************************************************************//*** CHALLENGE 1 of 2 ***/class PersonClass { constructor(name) { // add code here this.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类通过扩大PersonClass类来结构对象。除领有name属性和greet办法外,DeveloperClass还应有个introduce办法。当被调用时,introduce办法会打印“Hello World, my name is [name]”.
题解:
/*** CHALLENGE 2 of 2 ***/// add code hereclass DeveloperClass extends PersonClass { 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对象,其能够拜访userFunctionStore的所有办法,在不将办法一一于本身内复制的状况下。
题解:
const userFunctionStore = { sayType: function () { console.log("I am a " + this.type); },};let adminFunctionStore = Object.create(userFunctionStore);
挑战2/5
问题:
构建adminFactory函数,用于创立一个蕴含userFactory下所有数据域及默认值的对象,在不将数据域一一于本身内复制的状况下。
题解:
function userFactory(name, score) { let user = Object.create(userFunctionStore); user.type = "User"; user.name = name; user.score = score; return user;}function adminFactory(name, score) { const admin = new userFactory(name, score); return admin;}
挑战3/5
问题:
而后确保adminFactory中的type‘域的值为’Admin‘而不是’User'。
题解:
function adminFactory(name, score) { const admin = new userFactory(name, score); admin.type = 'Admin'; return admin;}
挑战4/5
问题:
确保adminFactory对象能够拜访到adminFunctionStore对象中的办法,在不全副复制的状况下。
题解:
function adminFactory(name, score) { let admin = Object.create(adminFunctionStore, { name: { value: name, }, score: { value: score, }, }); admin.type = "Admin"; return admin;}
挑战5/5
问题:
创立一个打印“Welcome users!"的sharePublicMessage办法,实用于adminFactory对象,但不适用于userFactory对象。请不要在adminFactory中间接增加这个办法。
题解:
const adminFunctionStore = Object.create(userFunctionStore, { sharePublicMessage: { value: function () { console.log("Welcome users!"); }, },});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的所有属性。请仅实用一行代码,在不一一增加属性的状况下。
class Dog { 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();
题解:
robotFido = Object.assign(robotFido, robotMixin);robotFido.speak(); // -> Logs "I am made of 4 legs and am made of metal"