JavaScript的原型链类笔记

 
  JavaScript的原型链类笔记
 

 
 一 原型链类创建 

 
 1、创建对象有几种方法 

 
  a、第一种方式：字面量 

var o1={name:'01'};
var o11=new Object({name:'011'});

 
  b、第二种方式：通过构造函数 

var M=function(){
this.name="02";
}
var o2=new M();

 
  c、第三种方式： 
 Object.create 

var P={name:'03'};
var o3=Object.create(P);

 
 2、原型、构造函数、实例、原型链之间的联系 

 
   Instanceof 
 的原理 

 
 New 
 运算符 

var new2=function(func){
var o=Object.create(func.prototype);
var k=func.call(o);
if(typeof k==='object'){
return k;
}else{
return o;
}
}

  3、jquery 如何使用原型 

  jQuery 原型实现 

  为何要把原型方法放在 $.fn ？ 

(function (window) {

    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function (key, value) {
            console.log(key,value,'css');
        },
        html: function (value) {
            console.log(value,'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

})(window)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>jquery test 1</p>
    <p>jquery test 2</p>
    <p>jquery test 3</p>


    <div id="div1">
        <p>jquery test in div</p>
    </div>


    <script type="text/javascript" src="./my-jquery.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px')


        var $div1 = $('#div1')
        $div1.css('color', 'blue')
    </script>
</body>
</html>

  好处： 

  只有 $ 会暴露在 window 全局变量 

  将插件扩展统一到 $.fn.xxx 这一个接口，方便使用 

秒客网

JavaScript的原型链类笔记

相关文章