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个独立的构造器。

http://www.aseoe.com/ true jQuery分离构造器 http://www.aseoe.com/show-13-499-1.html report <?php echo strlen($content) / 2; ?> 通过new操作符构建一个对象,一般经过四步:A 创建一个新对象 B 将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C 执行构造函数中的代码 D 返回这个新对象最后一点就说明了,我们只要返回一个新
TAG:jQuery 分离构造器
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-13-499-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)