jQuery别离结构器

导语 通过new操作符构建一个目标,一般通过四步:A 创立一个新目标 B 将结构函数的作用域赋给新目标(所以this就指向了这个新目标) C 履行结构函数中的代码 D 回来这个新目标最终一点就说明晰,咱们只需回来一个新
通过new操作符构建一个目标,一般通过四步:

  A.创立一个新目标

  B.将结构函数的作用域赋给新目标(所以this就指向了这个新目标)

  C.履行结构函数中的代码

  D.回来这个新目标

最终一点就说明晰,咱们只需回来一个新目标即可。其实new操作符首要是把原型链跟实例的this相关起来,这才是最要害的一点,所以咱们假如需求原型链就有必要要new操作符来进行处理。不然this则变成window目标了。

 

咱们来分析下jQuery的这个结构,以下是咱们常见的类式写法:

var $$ = ajQuery = function(selector) {
    this.selector = selector;
    return this
}
ajQuery.fn = ajQuery.prototype = {
    selectorName:function(){
        return this.selector;
    },
    constructor: ajQuery
}
var a = new $$('aaa');  //实例化
a.selectorName() //aaa //得到选择器姓名

 

首要改造jQuery无new的格局,咱们能够通过instanceof判别this是否为当时实例:

var $$ = ajQuery = function(selector) {
    if(!(this instanceof ajQuery)){
        return new ajQuery(selector);
    }
    this.selector = selector;
    return this
}

 

可是留意千万不要像下面这样写:

var $$ = ajQuery = function(selector) {
    this.selector = selector;
    return new ajQuery(selector);
}
Uncaught RangeError: Maximum call stack size exceeded

这样会无限递归自己,然后形成死循环而且溢出。

jQuery为了防止呈现这种死循环的问题,采纳的手法是把原型上的一个init办法作为结构器

var $$ = ajQuery = function(selector) {
    //把原型上的init作为结构器
    return new ajQuery.fn.init( selector );
}

ajQuery.fn = ajQuery.prototype = {
    name: 'aaron',
    init: function() {
        console.log(this)
    },
    constructor: ajQuery
}

这样的确处理了循环递归的问题,可是又问题来了,init是ajQuery原型上作为结构器的一个办法,那么其this就不是ajQuery了,所以this就彻底引证不到ajQuery的原型了,所以这儿通过new把init办法与ajQuery给别离成2个独立的结构器。

https://www.nucmc.com/ true jQuery别离结构器 https://www.nucmc.com/show-13-499-1.html report 1133.5 通过new操作符构建一个目标,一般通过四步:A 创立一个新目标 B 将结构函数的作用域赋给新目标(所以this就指向了这个新目标) C 履行结构函数中的代码 D 回来这个新目标最终一点就说明晰,咱们只需回来一个新
TAG:jQuery 别离结构器
本站欢迎任何方式的转载,但请有必要注明出处,尊重别人劳动成果
转载请注明: 文章转载自:BETWAY官网网 https://www.nucmc.com/show-13-499-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)