Blog

函数的定义

函数其实就是一个封装一段代码段的对象，那函数名其实仅是用来引用函数对象的一个普通变量

写代码的时候我们避免不了要重复用一些代码，一直重复写很耗时，而且不美观也不利于维护，因此函数的出现就是来让代码重用，便于维护。

一段代码，可能被反复使用，可以定义为函数，然后调用函数来使用这段代码。

在JavaScript中函数就是对象。函数不同于其他对象的决定性特点是，函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是

定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性，这些内部属性都用双重中括号来标注。

[[Call]]属性是函数独有的，表明该对象可以被执行。由于仅函数拥有该属性，ECMAScript定义了typeof操作符对任何具有[[Call]]属性的对

象返回 [object Function]

ES6 或 TS 引入了块级作用域,通过let和const、class等可以定义块级作用域里的变量，块级作用域内的变量不存在变量提升，且存在暂时性死区(在代码块内，使用let或const声明变量前该变量都是不可改变的)。常见的if语句，for循环的循环体内都可以定义块级变量。那么switch语句中的块级作用域是什么呢？ 先给出结论：

switch语句中的块级作用域，在整个switch语句中，而不是对于每一个case生成一个独立的块级作用域。

在JS中，大家通常用typeof来判断基本类型，instanceof来判断引用类型。

typeof

typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined字符串

对于Array,null等特殊对象使用typeof一律返回object，而函数返回function这正是typeof的局限性。

在判断除Object类型的对象(基本类型)时比较方便。

instanceof

object instanceof constructor

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

换种说法就是左侧的对象是否是右侧对象的实例。

相关练习

1
2
3

'123' instanceof String // true
let str = new String('123')
str instanceof String // true

一、七种内置类型和常见引用类型

什么是Ref

React的官方介绍是这样的：

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.

其中提到了这几个概念：

在典型的React数据流理念中，父组件跟子组件的交互都是通过传递属性(properties)实现的。如果父组件需要修改子组件，只需要将新的属性传递给子组件，由子组件来实现具体的绘制逻辑。

在特殊的情况下，如果你需要命令式(imperatively)的修改子组件，React也提供了应急的处理办法–Ref。

Ref 既支持修改DOM元素，也支持修改自定义的组件。

什么是flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world,and is free and open source.

环境安装

下载SDK

https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 或者 git clone -b beta https://github.com/flutter/flutter.git

镜像

添加环境变量 .bash_profile

1
2
3
4
5
6

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/chenyu/treasure/flutter/flutter/bin:$PATH

运行flutter doctor查看是否需要安装其它依赖项来完成安装：

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

创建项目

1. 在AndroidStudio安装Dart插件。启动studio，搜索flutter，自动安装Dart插件，完成后重启studio。

2. Android Studio - File - New -New Flutter Project

文件入口

项目路径下的lib文件夹下的main.dart文件

1
2
3
4
5
6
7
8

import 'package:flutter/material.dart'; //导包
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialAp
}

eval

1
2

var json = '{"a":"1", "b":2}';
var obj = eval("(" + json + ")");  // obj 就是 json 反序列化之后得到的对象

为什么要加括号呢？ 因为js中{}通常是表示一个语句块，eval只会计算语句块内的值进行返回。加上括号就变成一个整体的表达式。

1
2

console.log( eval('{}') );      // undefind
console.log( eval('({})') );    // Object {}

eval作用域问题

1 2 3 4 5 6 7

var s = 1; function a() { eval('var s=2'); console.log(s); } a(); // 2 console.log(s); // 1

在局部环境使用eval便会创建局部变量。可以显示指定eval调用者来改变上下文环境。

1
2
3
4
5
6
7

var s = 'global';
function a() {
    eval('var s = "local"');
    console.log(s);                 // local
    console.log(eval('s'));         // local
    console.log(window.eval('s'));  // global
}

对参数json进行校验防止xss漏洞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;

if (
    rx_one.test(
        json
            .replace(rx_two, "@")
            .replace(rx_three, "]")
            .replace(rx_four, "")
    )
) {
    var obj = eval("(" +json + ")");
}

递归手动扫描每个字符

new Function 函数声明的传参形式

1
2

var add = new Function('a, b', 'return a+b;');
console.log( add(2, 3) );    // 5

1
2

var jsonStr = '{ "age": 20, "name": "jack" }',
    json = (new Function('return ' + jsonStr))();

插入script

模拟jsonP的方式拼接字符串然后以callBack的方式返回。

工作中，React社区推崇搭配一起使用Immutable，就像咖啡牛奶伴侣一样。众所周知React的性能优化我们可以优化组件的嵌套层级，

避免不必要的重绘，以及shouldComponentUpdate来判别组件是否会因为当前属性(props)和状态(state)变化而导致组件输出变化。

一提到React，大家第一时间就想到的虚拟DOM(Virtual DOM)和伴随其带来的高性能（在虚拟dom上进行节点的更改最后在反映到真实dom上）。

但是React提供的是声明式的API(declarative API),好的一方面是让我们编写程序更加方便，但另一方面，却使得我们不太了解内部细节。