JavaScript的原型鏈類筆記
阿新 • • 發佈:2018-12-12
JavaScript的原型鏈類筆記
一 原型鏈類建立 1、建立物件有幾種方法 a、第一種方式:字面量
Instanceof
的原理
New
運算子
一 原型鏈類建立 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、原型、建構函式、例項、原型鏈之間的聯絡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 這一個介面,方便使用