慕课:解读zepto

课件,作者自己的项目:wangeditor.github.io.
作者推荐阅读: 深入理解javascript原型和闭包(完结)

1.2诡异的数组

$('span').push是存在这个方法的?
arr.__proto__.addClass = function(){}给数组原型对象添加自定义函数;

1.3原型基础知识

JS三座大山:原型与原型链;上下文环境与作用域;单线程与异步

var fn = function(){ }
console.log(fn.__proto__  === Function.prototype)    //true
console.log(fn.__proto__)    //ƒ () { [native code] }

//Function.prototype和Object.prototype不能修改,Array.prototype则可以。

2.1设计

手动改原型,却改不掉构造函数,因为{}相当于构造函数Obejct().

var arr = [1,2,3];
arr.__proto__ = {
    addClass: function  () {
        console.log('this is addClass');
    },
    concat: Array.prototype.concat,
    push: Array.prototype.push
};

console.log(arr.__proto__.constructor === Object );    //true

arr.__proto__.constructor === $p.__proto__.constructor;这段代码在1.2.0版本是false,在1.1.6版本是true!!!看来Z函数做了修改。

2.2

window.$ === undefined && (window.$ = Zepto)  
 //相当于
if(window.$ === undefined)  window.$ = Zepto

结构如下

var Zepto = (function(){
    var $
    
    // ...省略N行代码...
    
    $ = function(selector, context){
        return zepto.init(selector, context)
    }
    
    // ...省略N行代码...
    
    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

2.3 zepto.init()

compact()函数删除数组的零值。

2.4 zepto.Z()

dom.__proto__ = $.fn;
zepto.Z.prototype = $.fn;  //zepto.Z()作为构造函数生成对象dom.

数组和函数作为特殊的对象,也可以有属性;

2.5 新式写法

对象数组。

推荐阅读更多精彩内容

  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 118评论 0 2
  • 前言 js 中的类型检测也是很重要的一部分,所以说这篇文章我们就来讲一下怎么对 JavaScript 中的基本数据...
    sunshine小小倩阅读 116评论 1 3
  • 今天,和先生在家讨论海灵格的《谁在我家》。先生读到“伴侣关系优于亲子关系”、“女人通过孕育生命而显示自己的重要性,...
    Sunny之生命管理阅读 687评论 0 4
  • 昨天是007行动作业雨时间,我竟然给记错了!记成是今天的了! 回想当初加入007的初衷:“认真践行写作,提高思考能...
    一起来玩美阅读 24评论 0 1
  • 李妩娟 周口太康 原创分享坚持第17天 今天早上急着送孩子上学,把手机随便装到上衣口袋里,到单位后,发现手机不...
    默_d8a1阅读 115评论 0 3