profile
viewpoint

issue commentzlx362211854/daily-study

43. 介绍下函数式编程和柯里化

函数

image 在数学中,函数定义为:对于一个输入x,总是能得到唯一的输出y,型为y=f(x)这样的对应关系,叫做函数。 编程中,纯函数也就是指的,严格按照y=f(x)来定义的函数,输出只由输入决定,且对于唯一的输入只有唯一的输出。 最简单的例子:

var add = (x) => x + 1

上面add函数,实现了最简单的+1操作,返回值由输入值x决定,且只有唯一的返回值。此时add函数就叫做纯函数。 什么是不纯的函数:

var max = 10
var add = (x) =>{
   return x+1 > max ? 0 : x+1
}

add 返回值由外部变量max和输入值x同时决定,当输入值x+1>max时,返回值变成了0,这样返回值与输入值x不是唯一映射关系了,这样的函数就不是纯函数。

柯里化

柯里化可以看作函数的预存储或者预加载:

var add = (x, y) => x + y

// 这是一个基本加法计算的函数
add(2, 1) // 3
add(2, 4) // 6
add(2, 10) // 12
// 可以看到,我求的都是2加上一个数字的结果,每次都要输入参数2。
// 如何将它柯里化:
var add = (x) => (y) => x + y
var a2 = add(2)//将2预先加载出来
a2(1) // 3
a2(4) // 6
a2(10) // 12

柯里化后,可以将a2预加载出来,后续只要是要求2加上任何数字,都可以直接调用a2来计算,这里的a2,就是2的预加载函数。

zlx362211854

comment created time in 16 hours

push eventzlx362211854/daily-study

zlx362211854

commit sha fcb8bb6b5afd7ce3e784ef8af0cfe84b8613062b

2019-09-20 new daily 💐💐👏👏

view details

push time in a day

issue commentzlx362211854/daily-study

42. Map 和 WeakMap

es6中新增了Set和Map两种数据结构,对应WeakSet和WeakMap两种弱类型引用的结构

参见http://es6.ruanyifeng.com/#docs/set-map#Set

其中 Map是一种字典结构,本质上是键值对的集合,键可以是任何js对象,实现了值->值的映射结构,扩展了js的Object结构。

WeakMap是Map的弱引用类型结构,与Map有如下区别:
  1. WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名
  2. WeakMap的键名所指向的对象,不计入垃圾回收机制
goldEli

comment created time in 2 days

IssuesEvent

issue closedzlx362211854/daily-study

42. Map 和 WeakMap

介绍下 Map 和 WeakMap 的用法和区别

closed time in 2 days

goldEli

push eventzlx362211854/daily-study

zlx362211854

commit sha e094375409b81deaff70a314743a55f355d366e1

2019-09-19 new daily 💐💐👏👏

view details

push time in 2 days

issue commentzlx362211854/daily-study

41. [] + {} 和 {} + [] 的 结果一样吗?为什么?

js中,+ 运算符会涉及到隐式转换

  • 当+两边都是number类型时,不会隐式转换,直接计算算术加法:1 + 2 // 3
  • 当+有一边不是number类型时,就会进行隐式转换:'1' + 2 // '12',会将2进行toString()转换。
  • 当+两边是复杂类型时,都会通过toString()转换:
[] + [] 
//转换为
[].toString() + [].toString() // '' + '' -> ''

[] + {}
//转换为
[].toString() + {}.toString() // '' + '[object Object]' -> [object Object]

//特殊情况
{} + []
{}在行首,js会将{}当成代码块来看,所以,{} + []实际上被识别成了:
{
// some code
}
+[]

代码块不会参与运算,所以{} + []结果为:
+[]  -> +[].toString() -> +''(字符串隐式转换) -> 0
vernll

comment created time in 3 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 64b902485778f0c182d5676c05b94f2c3b26d305

2019-09-18 new daily 💐💐👏👏

view details

push time in 3 days

issue commentzlx362211854/daily-study

40.首屏加载优化方案

  1. 减少首页加载静态文件的大小,如在spa应用中,可使用代码分割,在传统页面中,可使用文件压缩
  2. 减少首页http请求的数量,如合成sprite图
  3. 图片,静态资源使用图床、cdn加速
  4. spa项目使用 server side render 服务器渲染加速首屏。
  5. js放在文档最后加载
  6. 减少不必要的消耗性能的js操作
  7. URL使用hash tag实现防重载
roxy0724

comment created time in 4 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 7eae0ff6400325abe8bcf9389ec69059d8fc55e7

2019-09-17 new daily 💐💐👏👏

view details

push time in 4 days

issue commentzlx362211854/daily-study

39. 什么是高阶函数,高阶组件?

高阶函数

函数接受一个或多个函数作为参数,并且返回值是函数,这样的函数叫做高阶函数 比如我们经常遇到Math.max,min函数,在使用过程中,可以经过封装,使它更好用

var HOF = (fn, arr) => {
  return fn(...arr)
}
HOF(Math.max,[1,2,3]) //3
HOF(Math.min,[1,2,3]) //1

高阶组件

高阶组件其实就是高阶函数,我们把组件函数化,其实他们二者是相同的。 比如在react中:

export default function Loader(props) {
  return function Loading() {
    return (
      <div>
        {props.loading && <icon className='loading'></icon>}
        {props.children}
      </div>
    )
  }
}

实现一个loading

zlx362211854

comment created time in 5 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 16671e64403812a6097babbe14d78194eacf3d5a

2019-09-16 new daily 💐💐👏👏

view details

push time in 5 days

issue openedzlx362211854/daily-study

39. 什么是高阶函数,高阶组件?

举例说明什么是高阶函数和高阶组件

created time in 5 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha a0573921880adb71f584de720bf4daa882c5d51d

Site updated: 2019-09-12 17:33:41

view details

push time in 9 days

push eventzlx362211854/daily-study

zlx362211854

commit sha d471f7a5cb1e6b876960649d378b8235277c683d

2019-09-12 new daily 💐💐👏👏

view details

push time in 9 days

startedsevenven/mobility

started time in 10 days

issue commentzlx362211854/daily-study

37. Webpack篇 —— 什么是 Tree Shaking ?

image

Tree Shaking,是代码优化重要的一项,可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。

  • Tree Shaking本质是一种静态代码分析,将不用的静态代码模块,剔除出去。这就代表了,只有模块代码才会被剔除,而且只有es的模块类型,是编译后执行(虽然js是解释型语言,但其实es6模块化后,有预编译的阶段)预编译阶段引用模块,才能实现静态分析。如果是CommonJS规范模块的代码,模块是执行时才引用的,比如require('...'),则是不能Tree Shaking的。举个例子:
// model.js
export const a = () => {
if (false) {
  // ....
}
return 'a'
return 'some useless code'
}
export const b = () => false
// index.js
import {a} from 'model.js'
a()

这个时候,如果使用Tree Shaking,则可以剔除不用的模块b。只保留a模块,但是a模块内的无用代码,则不会被剔除。

再进一步,如果index.js中的代码是这样的:

// index.js
import {a} from 'model.js'
import {b} from 'model.js'
a()

a和b模块都引入了,但是b没有调用,则b也不会被剔除,所以Tree Shaking优化也是有限的,所以我们再代码开发的时候,要结合一些代码检查工具,移除代码中不用的模块,来进一步实现代码优化。

vernll

comment created time in 10 days

push eventzlx362211854/daily-study

zlx362211854

commit sha ac267e84baed31bb1da1ef14be20ac701e8684b1

2019-09-11 new daily 💐💐👏👏

view details

push time in 10 days

issue commentzlx362211854/daily-study

36. word-wrap、word-break和white-space有什么区别?

  • word-wrap:
描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。
  • word-break:
描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
  • white-space:
描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
goldEli

comment created time in 10 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 0d676a29432b5c29652e64a360c526b436a17283

Site updated: 2019-09-10 15:01:07

view details

push time in 11 days

issue commentzlx362211854/daily-study

35. 介绍下REST api和GraphQL api

REST api

  • REST api简单来说就是将服务器资源定向到每个api上,比如localhost:8000/posts/1,对应查找文章的第一个,localhost:8000/comments/3,表示查找评论的第三条。REST的表达方式很简单,就是一条资源对应一个api,简洁明了。

GraphQL api

  • 想象一个场景,前端需要查询一个用户的name,age,和用户发表的文章列表。传统api怎么设计?后端设计两个接口,一个查询用户信息,一个查询用户文章。前端调这两个接口,获得返回的信息,再把两个接口的数据组装起来。
  • 能不能将上面的场景简化一些呢?前端只需要调一个接口,就可以查出用户的信息和用户的文章。
  • GraphQL 出现了。GraphQL api是一种特别灵活的api设计,他将传统的查询逻辑,交给了客户端。用代码举一个例子:
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
var schema = buildSchema(`
  type Query {
    name: String
    url: String,
    info: String
  }
`);

var root = {
  name: () => 'zlx',
  url: () => 'https://avatars1.githubusercontent.com/u/22437181?v=4',
  info: () => 'a frontend developer'
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

上面代码定义了一个GraphQL api服务器,且定义一个schema,包含了三条属性的信息:

name: String
url: String,
info: String

下面执行查询看看效果:

var request = require('graphql-request').request
const query = `{
  name
}`

request('http://localhost:4000/graphql', query).then(data =>
  console.log('data:', data)
)

上面代码,在前端执行了查询,只查询name属性: image

如果我要查询name,url和info三条信息呢? 只需要在前端查询语句上加上对应的字段:

const query = `{
  name,
  url,
  info
}`

image ⚠️注:上面代码实现是javascript语言的GraphQL 实现,其他语言实现参考这里 这就是GraphQL api,它使接口请求更加灵活,更加适用于复杂场景,也使后端查询设计更加简单,后端工程师只需要定义好数据库和相关的表结构的Schema,所有查询逻辑交给前端来处理,使开发变得高效。

zlx362211854

comment created time in 11 days

push eventzlx362211854/daily-study

zlx362211854

commit sha d98f1d29d2c183da2039018495a1852939676f70

2019-09-10 new daily 💐💐👏👏

view details

push time in 11 days

issue openeddongyuwei/hallelujahIM

建议增加时态词汇联想

比如我输入find,其实我想挑选的是found,建议增加时态联想

created time in 12 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 904189bd7cbb9e729e11534866bac9f37e4c311e

2019-09-09 new daily 💐💐👏👏

view details

push time in 12 days

issue commentzlx362211854/daily-study

34.svg和canvas的概念和区别

  • SVG:可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式
  • Canvas: canvass是HTML5 的新增标签,<canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。

都以画一个圆来举例说明:

  • svg
<svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" fill="red" />
</svg>
  • canvas
<canvas id="myCanvas" width="500" height="500"></canvas>
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  cxt.fillStyle="#FF0000";
  cxt.beginPath();
  cxt.arc(250,250,50,0,Math.PI*2,true);
  cxt.closePath();
  cxt.fill();
roxy0724

comment created time in 15 days

push eventzlx362211854/daily-study

zlx362211854

commit sha e326fc5063892aa843d2de4023eba52c131c8f27

2019-09-06 new daily 💐💐👏👏

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 55e6f992e6258a92633a97570ff3c92023a858b1

Site updated: 2019-09-06 11:43:55

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 610c4913f343b3cd72166a6e74a0792502ee6be0

Site updated: 2019-09-06 11:26:28

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 76d32092bc8740eb4f9d0a9b0e52b7c3954c6978

Site updated: 2019-09-06 11:18:39

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 12130d61281c2449be77910fb05ef90405ae5255

Site updated: 2019-09-06 11:12:07

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 45d43ac1c12cb431df46d10c5f2c4b32b719610f

Site updated: 2019-09-06 11:02:33

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha edf9603a8af73a35e59c6dc21f0d75c8adf0e371

Site updated: 2019-09-06 10:58:14

view details

push time in 15 days

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 8e4ea72cb3746249c660e09d4749f9c73a00e662

Site updated: 2019-09-06 10:51:50

view details

push time in 15 days

issue commentzlx362211854/daily-study

33. 介绍下 BFC、IFC、GFC 和 FFC

html页面布局中,所有的标签都遵循一定的布局规则,我们知道,元素大概大概分为两类,一类是块状(block)元素,一种是行内(inline)元素。块状元素垂直排列,行内元素横向排列。 作为前端肯定知道,块状元素,是一个元素占一行,从上往下排列,上下margin会重合,浮动元素会浮动在块状元素上面....等等一些细节。其实这些细节,都是由一定的规则来给出的,这些规则有几种:BFC、IFC、GFC 和 FFC。

  1. BFC (Block formatting context) 它有如下特性:
  • 内部的Box会在垂直方向,从顶部开始一个接一个地放置
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  • 每个元素的margin box的左边, 与包含块border box的左边相接触对于从左往右的格式化,否则相反。即使存在浮动也是如此
  • BFC的区域不会与float box叠加
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 其实就是块级元素所具有的属性。
  1. IFC (Inline formatting context) 它有如下特性:
  • 元素从左到右排列
  • 高度由元素的最大高度决定
  • 宽度由元素宽度和水平方向margin的和决定

行内元素,其实就是遵循IFC规则的。 3. GFC(GridLayout Formatting Contexts),直译为"网格布局格式化上下文"。

  • 当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。
  • display: grid的元素则遵循GFC规则
  1. FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"
  • display值为flex或者inline-flex的元素将会生成自适应容器(flex container)
  • display: flex的元素则遵循FFC规则
goldEli

comment created time in 16 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 9e80e33899b17da33939d845f66341a44c02c464

2019-09-05 new daily 💐💐👏👏

view details

push time in 16 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 0a6e04dae17002f0476f8a955cb3c04d86995797

2019-09-05 new daily 💐💐👏👏

view details

push time in 16 days

issue openedzlx362211854/daily-study

是否是

created time in 16 days

push eventzlx362211854/daily-study

zlx

commit sha 88a6d3e76f3b25b973868d6de0f5cc2f1bdc15e1

add read more

view details

push time in 16 days

push eventzlx362211854/daily-study

zlx362211854

commit sha d7043245186bd606743a0a0c9d2a57c3524d15d5

2019-09-05 new daily 💐💐👏👏

view details

push time in 16 days

issue commentzlx362211854/daily-study

32. 说说transition、animation、transform的作用

  • transform是一个静态属性,给该属性设置值,元素就会变换到指定的值,如:
box1 {
  transform: rotate(30deg);
}

则box1会旋转30度。 注意这个旋转是静态的,无任何动画效果。

  • transition。该属性,可以设置动画效果,如:
 .box2 {
      background: rgb(144, 93, 151);
      transition: transform 1s
    }
    .box2:hover {
      /* 定义transform动画 */
      transform: rotate(30deg);
    }

它表示,将transform用作动画变换,通常需要给一个触发条件,比如hover,此时表示hover的时候,将transform属性的值,用作动画变换,也就是旋转30度。用作动画变换的属性,也可以是其他属性,比如:

 .box2 {
     width: 100px;
      background: rgb(144, 93, 151);
      transition: width 1s;
    }
    .box2:hover {
      /* 定义transform动画 */
      width: 200px;
    }

表示,将width属性用作动画变化,变换范围是从100px变成200px,时间为1s。

  • animation可定制高级的动画,比如循环动画,延时动画,定制贝塞尔曲线的动画等,如:
.box3 {
      animation:box3Move 1s infinite;
    }
    @keyframes box3Move {
      /* 定义animate动画 */
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(30deg);
      }
    }
zlx362211854

comment created time in 17 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 3f046258ce2adceb5bf7bb24c5ccf8cae633bf39

2019-09-04 new daily 💐💐👏👏

view details

push time in 17 days

issue commentzlx362211854/daily-study

31.介绍下前端加密的常见场景和方法

在任何涉及到密码的地方,都会用到加密,加密是利用一种算法或hash,将明文密码加密成不可识别的密文,再传输给服务器去做判断,这个过程就是加密。

上面的场景,一般有三种处理方式:

  1. hash加密
  2. 对称加密
  3. 非对称加密
  • hash加密,就是前后端约定,将密码通过同一种hash算法,计算出密码的hash值,网络传输使用该hash传输,后段做密文比对,通过hash值来比对
  • 对称加密,用同样的加密算法,将明文加密,后段可用同样的算法,解密出明文。
  • 非对称加密,类似https的实现方式,通过公私钥对,来加密解密明文。
roxy0724

comment created time in 18 days

push eventzlx362211854/daily-study

zlx362211854

commit sha c6c3be89e2ca93cee4f3b034c95a9588b7f07809

2019-09-03 new daily 💐💐👏👏

view details

push time in 18 days

issue commentzlx362211854/daily-study

30. JavaScript 继承

js中继承,通过prototype来实现:

// 定义Person类
var Person = function() {
  this.type = 'human'
}
// 定义Man类
var Man = function() {
  this.gender = 'male'
}
// Man 继承Person的特性,这样Man就是Person的子类,包含Person的属性和方法
Man.prototype = new Person()
var boy = new Man();
console.log(boy.type)// human

在es6中,class的继承实现更便捷: class Person { constructor() { this.type = 'human' } } class Man extends Person { constructor(type) { super(type) this.gender = 'male' } } const boy = new Man(); console.log(boy.type) // human

goldEli

comment created time in 18 days

issue commentumijs/umi-blocks

添加block失败: TypeError: opts.remoteLog is not a function

在 umi@2.9.1 里修复了。

谢谢🙏

zlx362211854

comment created time in 19 days

issue openedumijs/umi-blocks

添加block失败: TypeError: opts.remoteLog is not a function

具体操作为:

zlxdeMacBook-Pro:umitest zlx$ npx umi block add AccountSettings --js
✔ 😁  Parse url and args
✖  error     TypeError: opts.remoteLog is not a function 
    at /workspace/umitest/node_modules/umi-build-dev/lib/plugins/commands/block/index.js:234:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/workspace/umitest/node_modules/umi-build-dev/lib/plugins/commands/block/index.js:128:103)
    at _next (/workspace/umitest/node_modules/umi-build-dev/lib/plugins/commands/block/index.js:130:194)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

环境信息为:

zlxdeMacBook-Pro:umitest zlx$ npx -v
9.7.1
zlxdeMacBook-Pro:umitest zlx$ node -v
v8.10.0
zlxdeMacBook-Pro:umitest zlx$ npm ls umi
ant-design-pro@1.0.0 /workspace/umitest
└── umi@2.9.0 


created time in 19 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 8c81ae5557fff9408e9ba3d73f4daf4bb8a29b53

2019-09-02 new daily 💐💐👏👏

view details

push time in 19 days

issue commentzlx362211854/daily-study

29. 说说React hook

react hooks 提供了一系列的函数,为了解决react声明周期难以维护的问题,使用hook 可以实现函数组件结偶,常用的hook有:

  • useState
function A() {
  const [count, setCount] = useState(0);
  return (<div onClick={setCount(count + 1)}>{count}</div>)
}
  • useEffect
function A(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
  //get ajax data
  // useEffect中可执行一些操作,这些操作是有副作用的,会对组件的state,或者props产生影响。
  // useEffect第二个参数是执行该函数的条件,这里代表props.id改变时,才执行该函数。
},[props.id])
  return (<div onClick={setCount(count + 1)}>{props.id}: {count}</div>)
}
zlx362211854

comment created time in 21 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 1b9f349b62558122b6d857553942ea83431a32fe

2019-08-30 new daily 💐💐👏👏

view details

push time in 22 days

issue openedzlx362211854/daily-study

29. 说说React hook

created time in 22 days

issue commentzlx362211854/daily-study

28.React组件通信方式

react 组件通讯有几种方式:

  1. props
  2. context
  3. redux
  4. react-router 路由切换时通过url传值。
roxy0724

comment created time in 23 days

push eventzlx362211854/daily-study

zlx362211854

commit sha 5b337a3f5c3e2ef85adec20805ba79e29ae558f7

2019-08-29 new daily 💐💐👏👏

view details

push time in 23 days

issue commentzlx362211854/daily-study

27. 实现千位分隔符

var format = function(figure) {
  var str = figure.toString()
  var left = str.split('.')[0]
  var right = str.split('.')[1]
  var strArrReverse = left.split('').reverse()
  var resultArr = []
  strArrReverse.forEach((i, index) => {
    if(index % 3 === 0 && index !== 0) {
         resultArr.push(",");
      }
      resultArr.push(i);
  })
  if (resultArr[0] === ',') resultArr.splice(0, 1)
  var result = resultArr.reverse().join('')
  return right ? result + "." + right : result
}
goldEli

comment created time in 23 days

push eventzlx362211854/daily-study

zlx362211854

commit sha cc337bb8f88ec266ea0e482ab7bdcd8317013e0a

2019-08-28 new daily 💐💐👏👏

view details

push time in 24 days

issue commentzlx362211854/daily-study

26. 谈谈js中this指向

var obj = {
  a: 100,
  b: function() {
    console.log(this)
  }
}
obj.b();// 1. this 指向obj

上面的代码,执行obj.b()后,打印出了obj对象,{a: 100, b: ƒ}证明此时this的指向时obj对象,这个很好理解。

加以修改:

var obj = {
  a: 100,
  b: function() {
    console.log(this)
  }
}
var some = obj.b;
some();// 2. this 指向window,因为some的执行上下文是window对象。

这段代码,将obj.b赋值给一个some变量,现在some变量就 变成了一个可执行函数,执行一下结果看到,this打印的是window对象。Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}这就尴尬了,为什么函数里面打印的this变了呢?这是因为,js执行的时候,this的指向是指向它执行时的上下文的,我们看,上面代码,首先是定义了一个some变量,注意这个some变量>是定义在window对象上的,此时some的执行上下文就是window,再把obj.b赋予给了some,此时some变成了一个函数,所以再执行some时,函数内的执行上下文,就是some所在的上下文,也就是window了>。 不信邪了,那如果我不在window对象上定义一个some呢?此时this又指向哪里呢?

var obj = {
  a: 100,
  b: function() {
    console.log(this)
  }
}
var oth = {
  some: obj.b
}
oth.some()

现在做了什么操作?我不再把some定义在window里面了,我把some定义在了一个oth对象里面,同样将ob j.b赋值给some,现在指向some的话,是什么结果呢?{some: ƒ}可见,this指向了oth对象,好>像明白了点什么,根据上面的分析,this指向它执行时的上下文,它执行时,是作为oth的some字段的属性执行的,所以它的this就指向了oth对象。

明白了,以上就是js语言this的机制。感觉有点怪怪的,如果我每次调用,总是想让this指向最原始的对象呢?也可以,用call或者apply就可以实现:

var obj = {
  a: 100,
  b: function() {
    console.log(this)
  }
}
obj.b();// 1. this 指向obj
var some = obj.b;
some();// 2. this 指向window,因为some的执行上下文是window对象。

var oth = {
  some: obj.b
}
oth.some(); // 3. this 指向oth,因为some的执行上下文是oth对象。

// 这是js语言的机制,this总是 指向具体调用时的执行上下文。
// call 和 apply能改变这种机制,从而实现手动更改this的指向:
// 2. 手动将this指向obj
some.call(obj)
// 3. 手动将this指向obj
oth.some.call(obj)

指向上面代码,就可以看出,上面的this,通过call函数,都被手动指向到obj中去了。apply也有同样功能,有一些细微差别,就不细说了。

zlx362211854

comment created time in a month

push eventzlx362211854/issues-manager

zlx

commit sha 0160885838f235abacbea8ffbc293c716dc40f01

fix

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 60eb06ac7ce2eb043cbd22bad0691ae8139302fe

2019-08-26 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

26. 谈谈js中this指向

created time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 9f0f7983352abf81c8fcd50d4bcacfef75158dba

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 2f7724ef654b55dee623204d182ea048770edf23

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 02c58a59a63b1d2c0f5c82c408b5b32d3d873310

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx

commit sha 4387f406fd510f7c3b2a1c05fb2fc505d3a6132a

remove

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha fa2776e5a583fcd22f272754f1b15b111550a224

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

3333

created time in a month

push eventzlx362211854/daily-study

zlx

commit sha 64b58bbeda7e7600a6490f56513dc43f019d2d17

fix

view details

zlx

commit sha c5a3f6787a74f755092f696235db660835c7b68d

Merge branch 'master' of https://github.com/zlx362211854/daily-study

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha b2691f639e4de58bf9965fd45ad2340fcf35e9bf

2019-08-23 new daily 💐💐👏👏

view details

zlx362211854

commit sha 4871d698b12d3c09249281f337895745ee0fff6f

Merge branch 'master' of github.com:zlx362211854/daily-study

view details

zlx362211854

commit sha 1b93c2dcbc83b3f8c6a3c7bbbd8466e4abe4e8f1

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

2222

sa

created time in a month

issue openedzlx362211854/daily-study

fgfd111

111

created time in a month

push eventzlx362211854/daily-study

zlx

commit sha 4efaa1957d83c41795ce9e9ae29111bb18d9f4d4

fix

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 940d2a1ed6b67f57628ce3cd65ae71224aae1cd0

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 544bb5fcc8a6ad1edbddd38509afc7bbe3575fda

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

sdad

weqe

created time in a month

push eventzlx362211854/daily-study

zlx

commit sha af0876a280f726f6d4c8ab941f0419f922c5dcf2

fix

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 22f296e1e49d66b34840a67f1ba3731e4181e6fc

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 86f942cbb32cf60714487ad112d3105775dc5314

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

new test

sa

created time in a month

push eventzlx362211854/daily-study

zlx

commit sha e24748e3cd8b5b1e4ba2f4b0a9a9bb291b187c45

add wechat msg

view details

zlx

commit sha f3745486bfed7f32087ca440f398dc2b70dfe68c

Merge branch 'master' of https://github.com/zlx362211854/daily-study

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 31ee4d3270e7be364193376419e4418046e4232a

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha dc72ba3d05585d3012c7caafab695b40f1fa2c30

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

test

123

created time in a month

issue commentzlx362211854/daily-study

25. 模拟实现 new 运算符

// 定义一个构造函数
var Person = function(name) {
  this.name = name;
}
// 定义构造函数的say方法
Person.prototype.say = function(msg) {
  console.log(this.name + ' say: ' + msg);
}
// 实现N方法
var N = function(Func) {
  return function() {
    // 定义一个用于返回的对象
    var obj = {};
    // 将构造函数的prototype赋值给obj对象的__proto__属性
    obj.__proto__ = Func.prototype;
    // 将构造函数的this重定向到obj对象中来
    Func.apply(obj, arguments);
    // 返回obj对象
    return obj
  }
}

var lily = N(Person)('lily');
console.log(lily.say('hello'))
// lily say: hello
goldEli

comment created time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha fd8727cb1bb1c64068b85cad7602199e5d2bd7b9

2019-08-23 new daily 💐💐👏👏

view details

push time in a month

issue commentzlx362211854/daily-study

24.解释DOM的事件流和事件委托

dom事件流

现代浏览器是有具体两部分:事件捕获,事件冒泡,事件捕获是发生在事件冒泡前面的 image

注册监听有三种方式:

  1. 元素上注册:<div id="div" onclick="doSomething(...)"></div>
  2. 函数注册:div.onclick = function () { ...}
  3. addEventListener注册。

注册监听的几点注意事项:

  • 通过函数注册的事件会覆盖通过dom注册的事件
  • 函数注册的事件只能注册一次,重复注册会覆盖
  • dom上注册的事件和函数上注册的事件会先于通过addEventListener注册的事件执行。
  • 通过addEventListener可重复注册多次相同事件
  • addEventListener注册的事件通过removeListener移除,函数注册的只能手动覆盖之前的onclick函数达到移除的目的,dom上注册的可以手动移除onClick或者通过函数注册覆盖。
  • 通过addEventListener可以定义注册在冒泡阶段还是捕获阶段,具体实现如下:
div1.addEventListener('click', function () { ... }) // 注册在冒泡阶段
div1.addEventListener('click', function () { ... }, { capture: true }) // 注册在捕获阶段

事件委托

事件委托,其实就是利用了冒泡的原理,将目标事件委托给目标的上级dom来处理(儿子的事件委托给父亲处理)。一般用在目标元素还未生成的时候,比如动态添加的dom,无法在本身绑定监听,那么就在他上级元素绑定,且要绑定冒泡阶段触发的事件,这样待到子元素被添加了以后,事件会冒泡到父级从而触发事件。 DOM事件、事件流

roxy0724

comment created time in a month

push eventzlx362211854/zlx362211854.github.io

zlx

commit sha 0d03367f9f108d8bd0f92ad1af6d4f9f04cf1b97

Site updated: 2019-08-22 11:09:40

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 0248fd3d5dc427db2995464c4905b730885fe70f

2019-08-22 new daily 💐💐👏👏

view details

push time in a month

issue commentzlx362211854/daily-study

23. 发布一个包到npm仓库,打印:hello world即可。

  1. 新建一个文件夹,进入文件夹后,登陆npm(如果切换了npm源的吗,,需要切换回官方源npm config set registry https://registry.npmjs.org才能登陆成功)
  2. 登陆npm npm login,输入用户名,密码,邮箱登陆。
  3. npm init生成一个新的npm项目,项目名称因为是要发布到官方的,所以不能重名。
  4. npm init后会生成一个package.json文件: image 其中main字段,决定了你的 包的入口文件是哪个(可以手动更改),这里是index.js,所以我们新建一个index.js
  5. 写一个简单的函数:
exports.hello = function() {
  console.log('hello world!')
}
  1. 执行发布npm publish image 如图,则表示发布成功。

下面再新建一个文件test.js,内容为:

const hello = require('zlx_test_publish').hello;
hello()

从npm上下载我们刚刚发布的包npm i zlx_test_publish, 然后执行这个文件 image 执行成功,代表成功发布了自己的包到npm。

zlx362211854

comment created time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 5804a23e2e88b4a640505831d9ae76117654e998

2019-08-21 new daily 💐💐👏👏

view details

push time in a month

issue openedzlx362211854/daily-study

23. 发布一个包到npm仓库,打印:hello world即可。

发布自己的包到npm仓库,并且可以安装使用,实现简单的功能。

created time in a month

issue commentzlx362211854/daily-study

22.校验代码括弧是否有效

最直白的做法:

const validate = code => {
  const map = {
    '(': 0,
    ')': 0,
    '[': 0,
    ']': 0,
    '{': 0,
    '}': 0
  };
  code = code.split('');
  for (let i = 0; i < code.length; i++) {
    if (map.hasOwnProperty(code[i])) {
      map[code[i]] += 1;
    }
  }
  return map['('] === map[')'] && map['['] === map[']'] && map['{'] === map['}']
};
console.log(validate('(()){}[]'));

效率不知道如何

goldEli

comment created time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha c8d60d5def5714b8cb8fcca15e5beb4fca6ac12f

2019-08-20 new daily 💐💐👏👏

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 0ac2ecf15783c8dd7ec2cb25fdc0bc02608efec3

2019-08-19 new daily 💐💐👏👏

view details

push time in a month

issue commentzlx362211854/daily-study

21.请详细描述AJAX的工作原理

ajax是浏览器向服务器发送网络请求的过程,采用了XMLHttpRequest来实现,一般的ajax请求,有一下步骤:

  1. 浏览器实例化一个XMLHttpRequest对象,用来发送请求和接收响应。
  2. 浏览器注册监听回调函数,内核新开进程,执行http网络请求任务。
  3. 如果是同步请求,浏览器会等到该请求返回了,再继续执行其他任务。
  4. 如果是异步请求,浏览器注册监听了以后,会继续执行其他任务,直到请求返回。
  5. 请求返回后,浏览器执行监听函数内的任务。
roxy0724

comment created time in a month

push eventzlx362211854/issues-manager

zlx

commit sha 0825f2cb70383ac73f02d789338d0844ccb0194e

add db to Instead localstorage

view details

push time in a month

push eventzlx362211854/daily-study

zlx362211854

commit sha 30893b66f733f3489d62873583af515dac7f0dda

2019-08-19 new daily 💐💐👏👏

view details

push time in a month

started1995parham/github-do-not-ban-us

started time in a month

issue commentzlx362211854/daily-study

19. Cookie,Session,Token

session和token都是服务器用来验证请求合法性的手段。 session

  1. 用户登陆时,会发送用户名密码过来
  2. 服务器拿到用户信息,生成一个sessionid,存到数据库,并给客户端返回该id。
  3. 客户端后续请求都带上该sessionid,发送到服务器。
  4. 服务器验证该id,如果在数据库存在,则证明该请求是合法的。

token

  1. 用户登陆时,会发送用户名密码过来
  2. 服务器拿到用户信息,服务器通过一定的加密算法,生成一个token,并返回给客户端。
  3. 客户端后续请求都带上该token,发送到服务器。
  4. 服务器用相同加密算法解密,如果解密成功,则证明该请求是合法的。

session和token区别就是,token少了在服务器存储的过程,这在大体量数据时,优势很明显,因为token相比session少了一次查询,会提高效率。

cookie

上面的token和session,都是服务器生成,然后返回客户端,客户端会将session或token存在本地,每次请求都会携带发送,这个客户端本地存储技术,就是cookie。

goldEli

comment created time in a month

issue commentzlx362211854/daily-study

20. 寻找数组中的单一元素

var singleNonDuplicate = function(nums) {
    const obj = {};
    let res;
    nums.forEach(i => {
        if (typeof obj[i] === 'undefined') {
            obj[i] = 1;
        } else {
            obj[i] += 1;
        }
    })
    Object.keys(obj).forEach(l => {
        if (obj[l] === 1) {
            res = l
        }
    })
    return res
};
singleNonDuplicate([1,2,2,3,4,3,5,4,5])
zlx362211854

comment created time in a month

more