稍微来学习一下 JavaScript

JavaScript 是何物?

我们都知道 JavaScript 是作为前端三件套的组成部分,却很少有人说得清楚他是来干什么的,他为什么在前端三件套中的地位如此之重要?又是为什么它可以将前端领域带进一个新的时代?

我们又来谈谈为什么要深入学习技术,前几天我看到某位大佬写的文章 👍👍(链接放到最下面),他用一个故事来说明了底层了解以及深入学习对于一个程序员的重要性,无论你是前端也好,后端也好,又或者是其他方向的程序员,下面的故事绝对会让你刷新三观 🧠:

故事开始>>

曾经团队邀请过 Nodejs 领域一个非常著名的大神来分享,这里便不说是谁了。当知道是他后,简直是粉丝的心情。但是课讲得确实一般,也许是第一次讲,准备不是很充足吧,以至于我都觉得我能讲得比他好,但是有两次,让我觉得这是真正的大神。一次就是,当有同事问到今年有什么流行的前端框架吗?这些框架有怎样的适用场景?该如何抉择?我以为大神一定会回答当时正火的 React、以及小鲜肉 Vue 之类,然后老生常谈的比较一番,但是他回答道:“I dont’t care!因为这些并不重要,真正重要的是底层,当你了解了底层,你就能很轻松的明白这些框架的原理,当你明白了原理,这些框架又有什么意思呢?”

看完这个故事是不是感觉感受到了什么不一样的东西?😀 其实我也感受到了,前端框架再大再高,也基于底层逻辑的肩膀上呀!!😁,那么其实我们就可以感受得到为什么我们来到大学学的计算机课是 C 语言、C++语言、计算机基础之类的课,但是总感觉没什么用,python、java 这些语言不好用还是怎么样?为什么大学不教一些对同学日后找工作实用的东西呢?又或者是学校墨守成规不懂得革新除旧?也许我们”道行“还很浅,不禁让人想到陆游的“纸上得来终觉浅、绝知此事要躬行”,到真正用到的时候才发现自己不过是因为学得太浅太浅才导致觉得大学教的东西没用,其实深入进去才真正发现什么才叫学识短浅,突然让我想到一个事情:

开始回忆>>

那时候我刚刚学会 hexo+GitHub 搭建个人博客,就拿着我的 blog 跟老师炫耀 😀,认为很厉害,老师一开始也感觉很惊奇,但是过了一会就问道:”这些东西都是你自己写出来的?”,我楞了一会,紧接着他又问:”那你来讲一下你的博客是基于什么语言实现的?”,当时把我问懵了 😅,我只懂 markdown 写文章,根本没看过 hexo 的文档,也没有细究里面的东西,确实,我们学得还是太浅太浅,其实只要你熟练运用这些东西,你想把你的 blog 做得多花里胡哨就多花里胡哨,你想怎么样就怎么样,我不过是班门弄斧,关公面前耍大刀,其实老师都是懂的,他们学得很透很彻底,他们也许已经看不懂那些层出不穷的框架,语言或者是插件之类的,可互联网时代差的是花里胡哨的东西吗?一个网页无论用什么写出来?它的表现力就是这样的,就是一个网页。

进入正题

题外话讲完了,让我们来进入今天的正题吧 😁

正题开始

不妨先来了解一波目录 😘

  1. 原型到原型链
  2. 词法作用域和动态作用域
  3. 执行上下文栈
  4. 变量对象
  5. 作用域链
  6. 从 ECMAScript 规划解读 this
  7. 执行上下文
  8. 闭包
  9. 参数按值传递
  10. call 和 apply 的模拟实现
  11. bind 的模拟实现
  12. new 的模拟实现
  13. 类数组对象与 arguments
  14. 创建对象的多种方式以及优缺点
  15. 继承的多种方式以及优缺点
  16. 浮点数的精度
  17. 头疼的类型转换

这些内容我是根据前端带师冯羽所写的进行自己的分析和补充~~,为什么要补充?第一:为了更好的学习 JavaScript(这也是我第三次学这个东西了),第二是我觉得既然大家在大学中都学过 C++,那么何不用 C++的方法来描述这样一门语言呢?😊JavaScript 是脚本语言,C++是面向对象的语言,可以试着用 C++去领会 JavaScript 的意思。

这些内容的出处:https://github.com/mqyqingfeng/Blog 😘😘

原型到原型链

构造函数创建对象

原型对象有一个 constructor 属性,指向关联的构造函数。

验证示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <bits/stdc++.h>
using namespace std;

class Box {
public:
Box(int a1, int b1) : a(a1), b(b1) {}
int a;
int b;
};

int main() {
Box* er = new Box(1, 2);
cout << er->a << ", " << er->b << endl;
return 0;
}

在 JavaScript 中,构造函数和 C++ 类有本质差别:

1
2
3
4
5
6
7
function Person() {}

var person = new Person()

console.log(person.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true
console.log(Object.getPrototypeOf(person) === Person.prototype) // true