AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-01-10 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 面向对象使用实义化的对象挑战1/1 MAKEPERSON问题:构建一个称为makePerson的接受两个参数（name和age）的函数，返回一个对象。此函数会：创建一个空对象；给空对象一个键名为name的属性，键值为输入函数的name参数的值；给空对象一个键名为age的属性，键值为输入函数的age参数的值；返回对象。题解：12345678910111213141516171819/****************************************************************

面向对象

使用实义化的对象

挑战1/1 MAKEPERSON

问题:

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

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

题解：

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 ***/
functionmakePerson(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 ***/
functionpersonFromPersonStore(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 ***/
functionPersonConstructor() {
// 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 ***/
functionpersonFromConstructor(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 ***/
classPersonClass{
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
classDeveloperClassextendsPersonClass{
  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
 
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’。

题解：

1
2
3
4
5
 
functionadminFactory(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
 
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中直接添加这个方法。

题解：

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!");
    },
  },
});
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的所有属性。请仅适用一行代码，在不逐个添加属性的情况下。

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

题解：

1
2
3
 
robotFido = Object.assign(robotFido, robotMixin);
robotFido.speak(); // -> Logs "I am made of 4 legs and am made of metal"
文章标签：
JavaScript
前端开发
算法
存储
关键词：
JavaScript算法
算法javascript
JavaScript面向对象
JavaScript专项
JavaScript专项算法
南京沂洲信息咨询有限公司
目录
相关文章
theMuseCatcher
|
19天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作，包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
theMuseCatcher
18 2
JS算法必备之String常用操作方法
theMuseCatcher
|
19天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等，提供了数组操作的全面指南。
theMuseCatcher
15 2
JS算法必备之Array常用操作方法
东方睿赢
|
28天前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀：深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架，以其声明式的响应式数据绑定和组件化开发著称。在Vue中，Diff算法是核心之一，它高效计算虚拟DOM更新时所需的最小实际DOM变更，确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点，递归检查子节点，并利用`key`属性优化列表更新。虽然存在局限性，如难以处理跨层级节点移动，但Diff算法仍是Vue高效更新机制的关键，帮助开发者构建高性能Web应用。
东方睿赢
38 1
奔跑的数据
|
2月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密：indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置，`includes`检查是否包含子字符串。KMP是高效的搜索算法，尤其适合长模式匹配。示例展示了如何在数据采集（如网页爬虫）中使用这些方法，结合代理IP进行安全搜索。代码示例中，搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
奔跑的数据
69 1
揭开JavaScript字符串搜索的秘密：indexOf、includes与KMP算法
朝阳39
|
2月前
|
算法 JavaScript
JS 【详解】树的遍历（含深度优先遍历和广度优先遍历的算法实现）
JS 【详解】树的遍历（含深度优先遍历和广度优先遍历的算法实现）
朝阳39
44 0
JS 【详解】树的遍历（含深度优先遍历和广度优先遍历的算法实现）
朝阳39
|
2月前
|
算法 JavaScript
JS 【详解】二叉树（含二叉树的前、中、后序遍历技巧和算法实现）
JS 【详解】二叉树（含二叉树的前、中、后序遍历技巧和算法实现）
朝阳39
32 0
朝阳39
|
2月前
|
算法 JavaScript
JS 【算法】二分查找
JS 【算法】二分查找
朝阳39
25 0
yqcoder
|
2月前
|
缓存 算法 前端开发
前端 JS 经典：LRU 缓存算法
前端 JS 经典：LRU 缓存算法
yqcoder
33 0
朝阳39
|
2月前
|
存储 JavaScript 搜索推荐
js【详解】arr.sort()数组排序（内含十大经典排序算法的js实现）
js【详解】arr.sort()数组排序（内含十大经典排序算法的js实现）
朝阳39
21 0
jjczqyjxgdegi
|
3月前
|
算法 JavaScript 安全
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
一篇文章讲明白JavaScript_提交表单和MD5算法密码加密
jjczqyjxgdegi
25 0

热门文章

最新文章

  • 1
    五分钟了解一下什么是「贪心算法 」 | 算法必看系列二十一
  • 2
    算法面试实战(二)- 面试中的复杂度分析
  • 3
    TapTap 算法平台的 Serverless 探索之路
  • 4
    《推荐系统：技术、评估及高效算法》一3.1　简介
  • 5
    某研究院的二叉树深度优先遍历变种的算法面试题以及答案
  • 6
    椭圆曲线密码算法（ECC）：数学之美与安全之钥
  • 7
    MMEditing | 新视频超分算法冠军BasicVSR++来了
  • 8
    数据结构与算法(三) 线性表之双向链表
  • 9
    机器学习算法：补一个k-近邻算法的测试
  • 10
    预约直播 | 流批一体机器学习算法平台Alink介绍及应用
  • 1
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    58
  • 2
    Vue.js 中父组件调用子组件的方法
    97
  • 3
    Vue.js 中子组件向父组件传值的方法
    55
  • 4
    使用JavaScript和XLSX.js将数据导出为Excel文件
    269
  • 5
    AngularJS是一款由Google收购的JavaScript结构框架
    54
  • 6
    JavaScript 关键字
    42
  • 7
    【Web 前端】什么是JS变量提升？
    87
  • 8
    <body> 中的JavaScript函数
    27
  • 9
    <head> 中的JavaScript 函数
    27
  • 10
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    125

    • 相关课程

    更多
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 相册服务中的故事生成算法介绍
  • Go语言核心编程 - 数据结构和算法
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 神经网络概览及算法详解

    • 相关电子书

    更多
  • 数据+算法定义新世界
  • 袋鼠云基于实时计算的反黄牛算法
  • Alink：基于Apache Flink的算法平台

    • 相关实验场景

    更多
  • 推荐系统入门之使用ALS算法实现打分预测
  • 欧拉图的构造性证明与算法实现
  • RSA密码算法设计与实现
    • 下一篇
    基于LNMP搭建WordPress