文章阅读(三)

Ajax语法浅析

原生Ajax

  • 1.获取XMLHttpRequest对象
  • 2.参数配置
  • 3.发送请求
  • 4.监测状态

还有onload、onloadstart、onprogress、onabort、ontimeout、onerror、onloadend等事件。

JavaScript深入系列、JavaScript专题系列、ES6系列、React系列

JavaScript深入之类数组对象与arguments

  • 所谓的类数组对象:拥有一个 length 属性和若干索引属性的对象。
  • 类数组对象的读写、获取长度、遍历三个方面与数组类似,但是类数组对象不可以使用数组的方法。
  • 调用数组方法:可以用Function.call间接调用。
  • 类数组转对象:Array.prototype.slice.call(arrayLike); Array.prototype.splice.call(arrayLike, 0);Array.from(arrayLike);Array.prototype.concat.apply([], arrayLike)。
  • Arguments对象就是一个类数组对象。在客户端JavaScript中,一些DOM方法(document.getElementsByTagName())也返回类数组对象。
  • Arguments对象:除了类数组的索引属性和length属性之外,还有一个callee属性。

arguments对象的几个注意要点:

  • arguments和对应参数的绑定:传入的参数,实参和arguments的值会共享,当没有传入时,实参与arguments值不会共享。除此之外,以上是在非严格模式下,如果是在严格模式下,实参和arguments是不会共享的。
  • 传递参数:将参数从一个函数传递到另一个函数。
  • 强大的ES6:使用ES6的...运算符,我们可以轻松转成数组。

应用:参数不定长、函数柯里化、递归调用、函数重载。

JavaScript深入之继承 

1.原型链继承

  • 问题1:引用类型的属性被所有实例共享
  • 问题2:在创建 Child 的实例时,不能向Parent传参

2.借用构造函数

  • 优点1:避免了引用类型的属性被所有实例共享
  • 优点2:可以在 Child 中向 Parent 传参
  • 缺点:方法都在构造函数中定义,每次创建实例都会创建一遍方法。

3.组合继承

  • 优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。

4.原型式继承:就是 ES5 Object.create 的模拟实现,将传入的对象作为创建的对象的原型

  • 缺点:包含引用类型的属性值始终都会共享相应的值,这点跟原型链继承一样。

5. 寄生式继承:创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

  • 缺点:跟借用构造函数模式一样,每次创建对象都会创建一遍方法。

6. 寄生组合式继承

  • 组合继承最大的缺点是会调用两次父构造函数
  • 这种方式的高效率体现它只调用了一次Parent构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

Javascript的继承与多态

JS正则表达式入门,看这篇就够了 

正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

使用方法:

第一步:定义一个正则表达式

  • 第一种通过"/正则表达式/修饰符"这种形式直接写出来
  • 第二种通过“new RegExp('正则表达式','修饰符)'”创建一个RegExp对象。RegExp对象还有自带的属性
  • 这里需要注意的是,第二种方法中由于字符串转义问题,"\\"代表"\"。

第二步:调用RegExp对象中的方法

  • test():检索字符串中指定的值。返回 true 或 false
  • exec():检索字符串中指定的值。匹配成功返回一个数组,匹配失败返回null。
  • compile():compile() 方法用于改变 RegExp。compile() 既可以改变检索模式,也可以添加或删除第二个参数。

如何写一个正则表达式

正则表达式都可以拆成一个或多个(取值范围+量词)这样的组合。针对每个组合我们根据JS正则表达式的规则翻译一遍,然后将每个组合重新拼接一下就好了。

正则表达式拓展

除了RegExp对象提供方法之外,String对象也提供了四个方法来使用正则表达式

  • match():在字符串内检索指定的值,匹配成功返回存放匹配结果的数组,否则返回null。这里需要注意的一点事,如果没有设置全局匹配g,返回的数组只存第一个成功匹配的值
  • search():在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置,否则返回-1
  • replace():替换与正则表达式匹配的子串,并返回替换后的字符串。在不设置全局匹配g的时候,只替换第一个匹配成功的字符串片段
  • split():把一个字符串分割成字符串数组

JavaScript深入之new的模拟实现

new运算符创建了一个用户自定义对象类型或者一个内置对象类型的实例,该实例具有一个constructor函数。

new之后,实例就可以访问到构造函数里的属性,也可以访问到原型对象prototype中的属性。

function objectFactory() {
    var obj = new Object(),
    Constructor = [].shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj, arguments);
    return obj;
};

返回值效果实现

  • 构造函数返回了一个对象,在实例person中只能访问返回的对象中的属性。
  • 返回一个基本类型的值,则相当于没有返回值进行处理。

所以我们还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么返回什么。

JavaScript深入之bind的模拟实现

bind()方法会创建一个新函数。当这个新函数被调用时,bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于MDN)。

由此我们可以首先得出bind函数的两个特点:返回一个函数;可以传入参数。

返回函数的模拟实现

关于指定this的指向,我们可以使用call或者apply实现

Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        self.apply(context);
    }
}

传参的模拟实现

在bind的时候,可以传参;执行bind返回的函数的时候,也可以传参。

可以用arguments对象进行模拟。

构造函数效果的模拟实现

bind还有一个特点,就是:一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。也就是说当bind返回的函数作为构造函数的时候,bind时指定的this值会失效,但传入的参数依然生效。

所以我们可以通过修改返回的函数的原型来实现。

构造函数效果的优化实现

 

posted @ 2017-05-02 21:09  chenxj  阅读(330)  评论(0编辑  收藏  举报