7函数的扩展

来源:http://www.chinese-glasses.com 作者:Web前端 人气:121 发布时间:2020-03-31
摘要:时间: 2019-11-01阅读: 140标签: 模式前言 OLD函数默认参数 // 缺点:布尔值为false的变量都会被赋为默认值function fn(x) { x = x || 'hello'}// 比较麻烦function fn (x) { if (typefo x === 'undefined') { x = 'he

时间: 2019-11-01阅读: 140标签: 模式前言

OLD函数默认参数

// 缺点:布尔值为false的变量都会被赋为默认值
function fn(x) {
    x = x || 'hello'
}
// 比较麻烦
function fn (x) {
    if (typefo x === 'undefined') {
        x = 'hello'
    }
}

"use strict"指令在JavaScript 1.8.5 (ECMAScript5)中新增。

基本用法

在 ES2017 中,允许定义和调用函数时,最后一个参数有,

至今,前端 er 们基本都默认开启严格模式敲代码。

惰性求值

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101

那么,你知道Typescript其实也有属于自己的严格模式吗?

报错情景

  1. 当函数参数x有默认值,再在函数中声明就会报错
  2. 当函数参数都没有默认值,允许参数同名。只要函数参数有一个就没有默认值,就不允许函数参数同名。
  3. 当函数参数有对象解构的情况,函数对象中的属性不能和其它参数同名
// 情景3 ---- 报错
function fn (x,{x = 1,n = 2}={}) {
        console.log(x,n)
    }
fn('yy');

1.Typescript严格模式规则

函数参数对象

function fn({x,y=1}) {
    console.log(x,y)
}
fn({}) // undefined,1
fn() // 报错
  1. 报错原因,当没有参数时,其实默认参数为undefined。对象和undefined发生解构报错。
  2. 正确原因,传入对象,发生解构,x没有默认解构值,则为undefined,y有默认解构值,则为1
function fn({x,y=1} = {}) {
    console.log(x,y)
}
fn({}) // undefined,1
fn() // undefined,1
  1. fn()执行过程如下
  • 调用fn,没有参数,使用函数默认参数{}
  • 发生对象解构,x没有解构默认值,y有默认解构值
// 分析以下案例
// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

当Typescript严格模式设置为on时,它将使用strict族下的严格类型规则对项目中的所有文件进行代码验证。规则是:

默认值位置

  1. 应该时函数的尾参数
  2. 有默认值,会影响fn.length
  • 一般是fn.length - 默认参数个数
  • 当默认参数不是尾参数,fn.length是第一个默认参数之前的参数的个数
  • 当参数是...rest,fn.length是0

规则名称

作用域

当函数有默认值时,参数会形成一个独立的作用域

解释

简单案例

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

function ff (y = x) {
    console.log(y);
}
  1. 函数f的参数形成一个默认作用域。函数初始化过程
  • 参数x被赋值为2
  • 参数y被赋值为x,在当前作用域中找x,找到x = 2,因此y = 2
  1. 函数初始化过程
  • 没有参数x
  • 参数y被赋值为x,在当前作用域中没有x,找到全局变量x,因此y = 1

noImplicitAny不允许变量或函数参数具有隐式any类型。noImplicitThis不允许this上下文隐式定义。strictNullChecks不允许出现null或undefined的可能性。strictPropertyInitialization验证构造函数内部初始化前后已定义的属性。strictBindCallApply对bind, call, apply更严格的类型检测。strictFunctionTypes对函数参数进行严格逆变比较。2.noImplicitAny

参数为函数的案例

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1
  1. 函数初始化
  • 参数x没有默认值,因此,在函数foo中再声明x10bet,不会报错
  • 在函数foo的参数作用域中,x先为undefined,在调用y时,x是参数而不是全局变量x,此时参数x改为2
  • 但是由于,在函数再次声明了x,这个x完全不是参数,因此函数foo打印x为3
  1. 当去掉var x = 3,函数foo的参数,其实相当于声明并赋值参数x,没有函数内部变量x,参数x就会被打印。

此规则不允许变量或函数参数具有隐式any类型。请看以下示例:

rest参数

  1. 形式,function fn(...rest)
  2. rest参数是数组,之后不允许有参数
// Javascript/Typescript 非严格模式function extractIds (list) { return list.map(member = member.id)}

严格模式

  1. 函数中可以使用use strict设置严格模式
  2. 当函数参数有默认值,解构赋值,扩展运算符时,不允许使用严格模式
  3. 有两种方法可以规避以上规则
  • 全局严格模式
  • 在立即调用的函数中使用严格模式

上述例子没有对list进行类型限制,map循环了item的形参member。而在Typescript严格模式下,会出现以下报错:

name属性

  1. name属性使用方式fnName.name
function fn() {} // fn.name--->fn
var fn = function () {} // fn.name--->fn
var fn = function fun() {} // fn.name----->fun
fn.bind({},1) // fn.name---->bound fn
(new Function).name // ----> anonymous
(function () {}).name //---->''
// Typescript 严格模式function extractIds (list) { // :x: ^^^^ // Parameter 'list' implicitly // has an 'any' type. ts(7006) return list.map(member = member.id) // :x: ^^^^^^ // Parameter 'member' implicitly // has an 'any' type. ts(7006)}

箭头函数

正确写法应是:

箭头函数结构

functionName = (arg1,arg2) => {arg1 + arg2};
  1. 其中函数名省略,则为匿名函数
  2. 根据参数情况也可以省略
  • 当没有参数或者两个及两个以上参数时,(小括号不可省略
  • 当有一个参数时,小括号可以省略
  1. 当函数体只有一条语句,可以省略{大括号,并默认有return返回。当不需要返回值时
  • 即使一条语句也加上{,这样就没有返回值
  • 使用void (一条语句),这样也没有返回值
var fn = (x,y) => x + y;
// 等价于
function fn (x,y) {
    return x + y;
} 
// Typescript 严格模式interface Member { id: number name: string}function extractIds (list: Member[]) { return list.map(member = member.id)}

箭头函数

  1. this固定,指向定义时的this
  2. 箭头函数不能做构造函数
  3. 不能使用arguments
  4. 不能使用yield,也就是箭头函数不能做Generator

注意点

  1. 箭头函数中没有自己的this,只是引用外层的this
  2. 箭头函数无法使用call(),apply(), bind()改变this执行

分析过程(一)

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// result: 42
  1. 当执行foo.call({id: 42})内部的this指向{id: 42}
  2. 此时,箭头函数没有自己的this。外部的this就是{id:42}
  3. 即使100毫秒后,在setTimeout中,this也不改变为window

分析过程(二)

function foo() {
  setTimeout(function() {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// result: 21
  1. 普通函数,this指向运行时的上下文环境
  2. setTimeout伪代码function setTimeout() {//delay... callback();},可以看到callback函数,也就是普通函数的没有绑定到其它对象上

1.1 浏览器自带事件该如何处理?

尾调用

  1. 最后一步调用其它函数,称为尾调用
  2. 尾调用函数定义时,不使用外层函数的变量
  3. 尾调用,有利于节约内存
// 这种情况没有使用外层函数的变量
function f() {
  let m = 1;
  let n = 2;
  return g(m + n);  // 最后一步用
}
f();
// 这种情况使用了外层函数的变量
function f() {
  let m = 1;
  function g(n) {
      return m + n;
  }
  return g(2);  // 最后一步用
}
f();

浏览器自带事件,比如e.preventDefault(),是阻止浏览器默认行为的关键代码。

这在Typescript严格模式下是会报错的:

// Typescript 严格模式function onChangeCheckbox (e) { // :x: ^ // Parameter 'e' implicitly // has an 'any' type. ts(7006) e.preventDefault() const value = e.target.checked validateCheckbox(value)}

若需要正常使用这类Web API,就需要在全局定义扩展。比如:

// Typescript 严格模式interface ChangeCheckboxEvent extends MouseEvent { target: HTMLInputElement}function onChangeCheckbox (e: ChangeCheckboxEvent) { e.preventDefault() const value = e.target.checked validateCheckbox(value)}

1.2 第三方库也需定义好类型

请注意,如果导入了非Typescript库,这也会引发错误,因为导入的库的类型是any。

// Typescript 严格模式import { Vector } from 'sylvester'// :x: ^^^^^^^^^^^// Could not find a declaration file// for module 'sylvester'.// 'sylvester' implicitly has an 'any' type.// Try `npm install @types/sylvester`// if it exists or add a new declaration (.d.ts)// file containing `declare module 'sylvester';`// ts(7016)

这可能是项目重构Typescript版的一大麻烦,需要专门定义第三方库接口类型

3.noImplicitThis

此规则不允许this上下文隐式定义。请看以下示例:

// Javascript/Typescript 非严格模式function uppercaseLabel () { return this.label.toUpperCase()}const config = { label: 'foo-config', uppercaseLabel}config.uppercaseLabel()// FOO-CONFIG

在非严格模式下,this指向config对象。this.label只需检索config.label。

但是,this在函数上进行引用可能是不明确的:

// Typescript严格模式function uppercaseLabel () { return this.label.toUpperCase() // :x: ^^^^ // 'this' implicitly has type 'any' // because it does not have a type annotation. ts(2683)}

如果单独执行this.label.toUpperCase(),则会因为this上下文config不再存在而报错,因为label未定义。

解决该问题的一种方法是避免this在没有上下文的情况下使用函数:

// Typescript严格模式const config = { label: 'foo-config', uppercaseLabel () { return this.label.toUpperCase() }}

更好的方法是编写接口,定义所有类型,而不是Typescript来推断:

// Typescript严格模式interface MyConfig { label: string uppercaseLabel: (params: void) = string}const config: MyConfig = { label: 'foo-config', uppercaseLabel () { return this.label.toUpperCase() }}

4.strictNullChecks

此规则不允许出现null或undefined的可能性。请看以下示例:

// Typescript 非严格模式function getArticleById (articles: Article[], id: string) { const article = articles.find(article = article.id === id) return article.meta}

Typescript非严格模式下,这样写不会有任何问题。但严格模式会非给你搞出点幺蛾子:

“你这样不行,万一find没有匹配到任何值呢?”:

// Typescript严格模式function getArticleById (articles: Article[], id: string) { const article = articles.find(article = article.id === id) return article.meta // :x: ^^^^^^^ // Object is possibly 'undefined'. ts(2532)}

“我星星你个星星!”

于是你会将改成以下模样:

// Typescript严格模式function getArticleById (articles: Article[], id: string) { const article = articles.find(article = article.id === id) if (typeof article === 'undefined') { throw new Error(`Could not find an article with id: ${id}.`) } return article.meta}

5.strictPropertyInitialization

此规则将验证构造函数内部初始化前后已定义的属性。

必须要确保每个实例的属性都有初始值,可以在构造函数里或者属性定义时赋值。

(strictPropertyInitialization,这臭长的命名像极了React源码里的众多任性属性)

请看以下示例:

本文由10bet发布于Web前端,转载请注明出处:7函数的扩展

关键词:

最火资讯