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

头像
冒泡的马树
    阅读 6 分钟

    ＠冒泡的马树

    题库原地址：http://csbin.io/oop

    面向对象

    使用实义化的对象

    挑战1/1

    问题:

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

    1. 创建一个空对象；
    2. 给空对象一个键名为name的属性，键值为输入函数的name参数的值；
    3. 给空对象一个键名为age的属性，键值为输入函数的age参数的值；
    4. 返回对象。

    题解：

    /****************************************************************
                  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 26
sandra.greet(); //-> Logs 'hello'

    挑战3/3

    问题：

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

    题解：

    /*** 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函数。其利用“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 30
mike.greet(); //-> Logs 'hello'

    挑战3/3

    问题：

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

    题解：

    /*** 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应有一个接受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 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对象，其可以访问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"

    javascript前端
    本文系翻译，阅读原文
    http://csbin.io/oop
    冒泡的马树
    194 声望14 粉丝

    曾痴迷于赛博朋克世界的代码玩家一枚，

    « 上一篇
    JavaScript专项算法题（4）：异步
    下一篇 »
    Python求解谷歌高速公路招聘广告：{ 无理数e中前十位连续的素数 }.com

    引用和评论

    推荐阅读
    头像
    JSBI-Calculator——兼容IE11的高精度大数值四则计算JS库组件

    冒泡的马树阅读 1.5k评论 3

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.2k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.7k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    0 条评论
    得票最新