JavaScript原型与原型链,原型的实际应用

2018-06-24 01:58:28来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

原型链是js面向对象的基础,非常重要。
一,创建对象的几种方法:
1,字面量
var o1 = {
    name:'o1'
};
2,构造函数
var M = function(name){
    this.name = name;
};
var o2 = new M('o2');
var a = {} 其实是 var a = new Object()的语法糖,推荐使用前者
var a = [] 其实是 var a = new Array()的语法糖,推荐使用前者
function Foo(){} 其实是 var Foo = new Function()的语法糖,推荐使用前者
 
3,Object.create(Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 )
var P = {name:'o3'};
var o3 = Object.create(P);

 二,原型链

JavaScript 规定,所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型……
那么,Object.prototype对象有没有它的原型呢?回答是Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。因此,原型链的尽头就是null。
 Object.getPrototypeOf(Object.prototype) //null

Object.prototype === Object.getPrototypeOf( {} ); //true
5条原型规则
1,所有的引用类型(数组,对象,函数),都具有对象特性,即可自由扩展属性
2,所有的引用类型(数组,对象,函数),都有一个__proto__属性(隐式原型),属性值是一个普通的对象
3,所有的函数,都有一个prototype属性(显式原型),属性值也是一个普通的对象
4,所有的引用类型(数组,对象,函数)__proto__属性值指向它的构造函数的prototype属性值
5,当试图得到一个引用类型(数组,对象,函数)的某个属性时,如果这个引用类型本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找

看下图

 

三,instanceof原理

判断一个函数是否是一个变量的构造函数

工作原理:判断实例对象的__proto__属性和构造函数的prototype是否同一个地址,只要在原型链上的构造函数,都会被instanceof认为是实例的构造函数。如图:

    // 判断实例对象的proto属性和构造函数的prototype是否同一个地址
    // 只要在原型链上的构造函数,都会被instanceof认为是实例的构造函数
    var M = function(name) { this.name = name; };
    var o2 = new M('o2');
    o2.__proto__ === M.prototype //true
    M.prototype.__proto__ === Object.prototype //true
    o2.__proto__.__proto__ === Object.prototype //true

    o2 instanceof M //true
    o2 instanceof Object //true

    // 用constructor属性判断更严谨
    o2.__proto__.constructor === M //true
    o2.__proto__.constructor === Object //false

四,new运算符工作原理

    // new运算符及背后工作原理 new后跟构造函数
    // 1,一个新对象被创建,它继承自func.prototype(构造函数的原型对象)
    // 2,构造函数func被执行,执行的时候,相应的传参会被传入,同时上下文(this)会被指定为这个新实例
    // 3,如果构造函数返回了一个“对象”,那么这个对象会取代整个new出来的结果,如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象
    var new2 = function(func) {
        var o = Object.create(func.prototype);
        var k = func.call(o);
        if (typeof k === 'object' && k != null) {
            return k;
        } else {
            return o;
        }
    };

 五,原型链继承的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>proto</title>
</head>

<body>
    <div id="div1">123</div>
    <script>
    // 封装DOM查询
    function Elem(id) {
        this.elem = document.getElementById(id);
    }

    Elem.prototype.html = function(val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
            return this;//方便链式操作
        } else {
            return elem.innerHTML;
        }
    }

    Elem.prototype.on = function(type, fn) {
        var elem = this.elem;
        elem.addEventListener(type, fn);
        return this;//方便链式操作
    }

    var div1 = new Elem('div1');
    console.log(div1.html());
    div1.html('<p>234p</p>').on('click', function() {
        alert('1');
    }).html('<p>js</p>');
    </script>
</body>

</html>

六:原型实际应用

1,看一个平时使用jquery或者zepto的例子:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>

<body>
    <p>jquery 1</p>
    <p>jquery 2</p>
    <p>jquery 3</p>
    <div id="div1">
        <p>jquery test in div</p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    var $p = $('p');
    $p.css('color', 'red'); //css是原型方法
    console.log($p.html()); //html是原型方法,这里只打印第一个   jquery 1

    var $div = $('#div1');
    $div.find('p').css('color', 'blue'); //find,css是原型方法
    console.log($div.html()); //html是原型方法  <p style="color: blue;">jquery test in div</p>
    </script>
</body>

</html>
2,zepto如何使用原型(简化版)-my-zepto.js
(function(window) {
     // 空对象
     var zepto = {};

     // 构造函数
     function Z(dom, selector) {
         var i, len = dom ? dom.length : 0;
         for (i = 0; i < len; i++) {
             this[i] = dom[i];
         }
         this.length = len;
         this.selector = selector || '';
     }

     zepto.Z = function(dom, selector) {
         // 注意,出现了 new 关键字
         return new Z(dom, selector);
     }

     zepto.init = function(selector) {
         // 源码中,这里的处理情况比较复杂,但因为本次只针对原型,因此这里就弱化了
         var slice = Array.prototype.slice;
         var dom = slice.call(document.querySelectorAll(selector));
         return zepto.Z(dom, selector);
     }


     // 使用zepto的$
     var $ = function(selector) {
         return zepto.init(selector);
     }
     window.$ = $;


     $.fn = {
         constructor: zepto.Z,
         css: function(key, value) {
             console.log('css');

         },
         html: function(value) {
             // console.log('html');
             return '这是一个模拟的html函数';
         }
     }

     zepto.Z.prototype = Z.prototype = $.fn; //!!!

 })(window) 
测试:新建zepto.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>zepto</title>
</head>

<body>
    <p>zepto 1</p>
    <p>zepto 2</p>
    <p>zepto 3</p>
    <div id="div1">
        <p>zepto test in div</p>
    </div>
    <script src="./my-zepto.js"></script>
    <script>
    var $p = $('p');
    $p.css('color', 'red'); //css是原型方法
    console.log($p.html()); //html是原型方法,这是一个模拟的html函数"
    </script>
</body>

</html>
3,jquery如何使用原型(简化版)-my-jquery.js
(function(window) {
    var jQuery = function(selector) {
        // 注意new关键字,第一步就找到了构造函数
        return new jQuery.fn.init(selector);
    }
    window.$ = jQuery;

    // 初始化 jQuery.fn
    jQuery.fn = jQuery.prototype = { //!!!
        constructor: jQuery,

        // 其他函数
        css: function(key, value) {

        },
        html: function(value) {
            return 'html';

        }
    }

    // 定义构造函数-简化版
    var init = jQuery.fn.init = function(selector) {
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll(selector));

        var i, len = dom ? dom.length : 0;
        for (i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || '';
    }
   
    // 定义原型
    init.prototype = jQuery.fn;
    
})(window)

 测试:新建jquery.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>

<body>
    <p>jquery 1</p>
    <p>jquery 2</p>
    <p>jquery 3</p>
    <div id="div1">
        <p>jquery test in div</p>
    </div>
    <script src="./my-jquery.js"></script>
    <script>
    var $p = $('p');
    $p.css('color', 'red'); //css是原型方法
    console.log($p.html()); //html是原型方法,这里只打印第一个   "jquery 1"
    </script>
</body>

</html>
4,如何体现原型的扩展性-插件机制
思考:为何要把原型方法放在$.fn?:扩展插件。(第一,构造函数的 prototype 肯定得指向能扩展的对象;第二,$.fn 肯定得指向能扩展的对象)
看一个简单的插件的例子:
$.fn.getNodeName = function(){
    return this[0].nodeName;
}

 好处:

1,只有$会暴露在window全局变量
2,将插件扩展统一到 $.fn.xxx 这一个接口,方便使用

实践:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>

<body>
    <p>jquery 1</p>
    <p>jquery 2</p>
    <p>jquery 3</p>
    <div id="div1">
        <p>jquery test in div</p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        // 插件扩展
        $.fn.getNodeName = function(){
            // console.log(this);
            console.log(this[0].nodeName);
        }
    </script>
    <script>
        // 验证
        var $p = $('p');
        $p.getNodeName()  //P
        $div1 = $('#div1');
        $div1.getNodeName()  //DIV
    </script>
</body>

</html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:NPM实用指北

下一篇:JavaScript异步和单线程