版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qishuixian/article/details/79751904
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 这一个接口,方便使用