Skip to content

zhongziqi/javascript_advanced

Repository files navigation

深入理解javascript,突破前端发展瓶颈

  • 我认为要想突破这个瓶颈,首先是要更加严格的要求自己,因为这个是你的内推力,会帮助你在遇到问题时不放弃;其次是将概念结合实际业务场景,这将让你觉得这个过程很有趣,而不会很无聊。所以我在学习一个新的概念的时候,往往是先去网上找这个东西能解决什么问题,然后实践。【不过感觉我越写到后面越是脱离实际应用了,哈哈哈】

闭包

作用一:缓存

  1. 比如我们在做一些区分用户的系统时,常常要用到token去做不同的请求,而这个token只需要加载一次[有些情况是会过期的]。
  2. 或者是做页面列表渲染的时候,该列表不会经常的发生变化,我们就可以将这些请求的数据放在闭包里面[突然间想到,vue里面有一个keep-alive,实现的就是这个类似功能,难道这个的原理就是用闭包实现的(思索脸)]

作用二:封装

  1. 感觉有点类同于作用一了

原型,原型链

构造函数

  1. 感觉构造函数就是一个普通的函数不过是里面使用了this,然后再使用new实例化一个对象
  2. 实例化后的对象会有一个constructor属性指向原来的构造函数
  3. 检测实例化后的对象中是否存在构造函数的prototype属性
  4. 构造函数和prototype是什么鬼,这样做有什么用(拿猫作为例子,猫一和猫二都有一个共同的属性,他们都吃猫粮,在我们创建构造函数的时候,如果将这个共同属性放在构造函数里面时,实例化后,因为猫一和猫二都拥有共同的属性,这就造成重复实例的现象。我的举例都是很简单的,有时候我觉得自己太抠门了,连一丢丢的内存都分得那么清楚,而在实际的项目中,却是极大的影响性能的,所以既然是进阶,就必须清除那一亩三分地)
  5. 判断某个实例化对象中的属性是构造函数里面的属性还是继承自prototype中的属性
  6. 可以用in来判断某个实例化后的是否含有某个属性

构造函数和继承

  1. 浅显一点的来讲吧:比如你爹当年开赌场赚了一大笔钱(父构造函数),而你只有一辆凤凰牌全自动单车(子构造函数),有一天你父亲跟你说:孩子,我要退休了,我所有的财产都给你了,然后你很开心的去继承,但要怎么去继承这批黑钱呢,javascript提供的方法有如下几种:(这个形象的比喻中,一直在强调你爹想给到你干净的钱,在代码中是因为子构造函数的原型对象的修改会影响到父构造函数的原型对象)
  2. 在子构造函数里面,使用apply(很明显你爹缺乏法律意识)
  3. 通过prototype的模式(这种方法是将子构造函数拥有凤凰牌单车扔了,抛掉过去,迎接全新的未来,不过你继承过来的钱还是不干净的)
  4. 这个继承模式和3有些类似,不过这种做法效率却是比3的高,因为不用去执行父构造函数的实例了,但钱还是不干净的
  5. 这个继承的方法,你爹就有为你考虑啦,你爹找到一个第三方的洗钱机构,从此以后你继承过来的财富就是清白的啦,就可以大胆愉快的花花花了
  6. 这个方法就很稳,你爹跟你说,孩子,钱在我这里已经洗干净了,你不用关心我这边怎么操作,你直接继承,包你没事

proto 和 prototype的关系

  1. proto 究竟是什么?每个对象都会在其内部初始化一个属性,不信的话,你随便打印一个对象,都会有__proto__的存在,比如我们在访问一个对象的属性的时候,该属性不存在的话,他就会去__proto__ 里面找这个属性,找不到的话就在__proto__.proto 再寻找,直到找到,这也就是我们平时说很难理解的原型链的概念了。
  2. 当我们在实例化一个函数对象的时候,有一个规律需要记住,如:var test = function(){};var res = new test();那么就有res.proto=test.prototype;
  3. 所以总结的来说__proto__是原型链的本质,prototype只是在new的时候体现了作用

new 是什么东西

  1. new的作用是什么呢?其实我们完全可以不用new,因为这是JS创始人的封装,因为之前我们需要四个步骤来实例化一个构造函数,现在可以通过一个new来解决(看我的例子)

whats 'this'?

  • this绑定的四种规则
  1. 默认绑定全局变量
  2. 隐式绑定(a:多个层叠上下文取最后一个对象;b:全局绑定和隐式绑定,默认使用全局绑定)
  3. 显示绑定(即使用bind,apply,call,如果他们的接收的第一个参数为null,则this的指向为全局)
  • bind接收的参数和call一致,不同于apply和call的是:bind会生成一个新的函数,可以在需要的地方进行调用
  • apply(obj,args)该函数接收两个参数:obj为替代使用者里面的this,args为数组,arguments的简写
  • call(obj,arg1,arg2,...)用法同上,不同的是传参的方式,call可以指定特定的属性名
  1. new新对象绑定

作用域和作用域链

  • 作用域
  1. 全局作用域:
  2. 1在最外层定义的函数或者在最外层定义的变量
  3. 2还有那些没有使用var声明的变量,
  4. 3使用window定义的变量,或者本来就存在于window下的属性,如location,open()...
  5. 局部作用域:
  6. 1 很明显,局部作用域和全局作用域相反,一个很常见的就是在函数里面定义的变量和方法
  • 作用域链

About

深入理解javascript内部,突破前端瓶颈

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published