JavaScript专项算法题（5）：面向对象

面向对象
使用实义化的对象
挑战1/1 MAKEPERSON
问题:

构建一个称为makePerson的接受两个参数（name和age）的函数，返回一个对象。此函数会：

创建一个空对象；
给空对象一个键名为name的属性，键值为输入函数的name参数的值；
给空对象一个键名为age的属性，键值为输入函数的age参数的值；
返回对象。
题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/

              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
问题：

在personStore对象内，创建greet属性，其值为一个打印“hello”的函数。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/

                   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对象。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/ 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 26
sandra.greet(); //-> Logs ‘hello’
挑战3/3 INTRODUCE
问题：

在不改变上述已写代码的情况下，给personStore对象添加一个用于打印“Hi，my name is [name]”的introduce方法。

题解：

1
2
3
4
5
6
7
8
/ CHALLENGE 3 of 3 /

// add code here
personStore[“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”字符串的函数。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/

                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
问题：

构建personFromConstructor函数，接受参数为name和age。当被调用时，此函数会使用“new”关键词来创建person对象而不是Object.create方法。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/ 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 30
mike.greet(); //-> Logs ‘hello’
挑战3/3 INTRODUCE
问题：

在不改变上述已写代码的情况下，给PersonConstructor函数添加一个打印“Hi, my name is [name]”的introduce方法。

题解：

1
2
3
4
5
6
7
/ CHALLENGE 3 of 3 /
// add code here
PersonConstructor.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”字符串。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/

                    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类。DeveloperClass类通过扩展PersonClass类来构造对象。除拥有name属性和greet方法外，DeveloperClass还应有个introduce方法。当被调用时，introduce方法会打印“Hello World, my name is [name]”.

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
/ CHALLENGE 2 of 2 /

// add code here
class 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
问题：

构建adminFunctionStore对象，其可以访问userFunctionStore的所有方法，在不将方法逐个于自身内复制的情况下。

题解：

1
2
3
4
5
6
7
const userFunctionStore = {
sayType: function () {

console.log("I am a " + this.type);

},
};

let adminFunctionStore = Object.create(userFunctionStore);
挑战2/5 ADMINFACTORY
问题：

构建adminFactory函数，用于创建一个包含userFactory下所有数据域及默认值的对象，在不将数据域逐个于自身内复制的情况下。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
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
问题：

然后确保adminFactory中的type‘域的值为’Admin‘而不是’User’。

题解：

1
2
3
4
5
function adminFactory(name, score) {

const admin = new userFactory(name, score);
admin.type = 'Admin';
return admin;

}
挑战4/5 ADMINFACTORY
问题：

确保adminFactory对象可以访问到adminFunctionStore对象中的方法，在不全部复制的情况下。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
function adminFactory(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中直接添加这个方法。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const adminFunctionStore = Object.create(userFunctionStore, {
sharePublicMessage: {

value: function () {
  console.log("Welcome users!");
},

},
});

function adminFactory(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的所有属性。请仅适用一行代码，在不逐个添加属性的情况下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
题解：

1
2
3
robotFido = Object.assign(robotFido, robotMixin);

robotFido.speak(); // -> Logs “I am made of 4 legs and am made of metal”