zepto设计和源码分析（推荐）原

晓歌

发布于 2018-08-15 14:57:48

3670

发布于 2018-08-15 14:57:48

文章被收录于专栏：破晓之歌破晓之歌

课程地址：https://www.imooc.com/learn/745

一、简单介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" http-equiv="X-UA-Compatible" content="IE=edge,width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0">
    <title>zepto</title>
    <style>
        .blue{color:blue;}
    </style>
    <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>
</head>
<body>
    <p id="p1">测试</p>
    <div>
        <span>test</span>
        <span>test</span>
        <span>test</span>
    </div>
    <script >
        var $p1 = $('#p1')
        var $span = $('span')
        console.log($p1);
        console.log($span);
    </script>
</body>
</html>

arr.__proto__.addClass = function(){alert(456)}

二、js原型基础

constructor是指向这个对象本身

这两种写法完全一样

写法等价

数组：

整理：

//第一句话----------------每个函数都有一个prototype属性
var fn = function(){}
fn.prototype
fn === fn.prototype.constructor

//第二句话----------------所有通过函数new出来的东西，这个东西都有一个__proto__指向这个函数的prototype
//空函数
var fn = new Function()
fn.__proto__
fn === arr.prototype.constructor//true

//数组
var arr = []//等同下面一行的写法
var arr = new Array()//写法2，等同上一行
arr.__proto__
arr === arr.prototype.constructor//true

//对象
var a = {}//等同下面一行的写法
var a = new Object()//写法2，等同上一行
a.__proto__
a === arr.prototype.constructor//true


//第三句话----------------当你想要使用一个对象（或者一个数组）的某个功能时：如果该对象本身具有这个功能，则直接使用；如果该对象本身没有这个功能，则去__proto__中找

//举例
arr.push(1)
arr//[1]
arr.__proto__.addClass= function(){alert(111)}//数组没有addClass方法，在__proto__自定义添加
arr1.addClass()//执行，结果是弹出111的对话框



//----------------原理：原型对象
Array
Array.prototype
Object
Object.prototype
Function
Function.prototype

//等价写法
[].concat === Array.prototype.concat;//true
arr.__proto__ === Array.prototype;//true

三、源码分析

3.1分析结构

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

//验证
var $p = $('p');
// 使用constructor验证
arr.__proto__.constructor === $p.__proto__.constructor//true

// 使用instanceof验证
console.log($p instanceof Array);//false
console.log(arr instanceof Array);//false