JS基础——JavaScript原型和原型链及实际应用
构造函数
function Stu(name,age){
this.name=name;
this.age=age;
}
原型规则和示例
// 不希望打印出原型的属性,只打印自身属性
for(let item of f){
if(f.hasOwnProperty(item)){
console.log(item)
}
}
原型链
let f =new Foo();
f.alertName= function(){
// 方法具体实现
}
f.toString() //toString方法在Foo原型中找,找不到接着要去 f.__proto__.__proto__中查找
New一个对象的过程
- 创建一个新的对象
- this指向这个新的对象
- 执行代码,即对this赋值
- 返回this
原型链继承
function Elem(id){
this.elem =document.getElementById(id);
}
Elem.prototype.html =function(val){
if(val){
return this.elem.innerHTML;
}
this.elem.innerHTML= val;
return this; //将Elem对象返回
}
Elem.prototype.on =function(type,func){
this.elem.addEventListener(type,func);
return this;
}
const elem =new Elem('div1');
elem.html('张三').on('click',function(){
console.log('点击了文本,打印张三');
}).html(‘李四’)
实际应用
新建js文件my-z.js,如下是my-z.js文件源码,解释: slice.call能将具有length属性的对象转成数组 document.querySelectorAll(selector) 是个类数组, 没有.slice 原型，所以需要call，
… 或者[].slice.call(arguments, 0)
(function(window){
var Z = function(dom,selector) {
var i,len =dom? dom.length: 0;
for(i=0;i<dom.length;i++){
this[i] =dom[i];
}
this.length =len;
this.selector =selector || ''
}
var zepto = {}
zepto.Z= function(dom,selector){
return new Z(dom,selector)
}
zepto.init =function(selector){
var slice = Array.prototype.slice;
var dom =slice.call(document.querySelectorAll(selector)) //slice.call能将具有length属性的对象转成数组 document.querySelectorAll(selector) 是个类数组, 没有.slice 原型，所以需要call
return zepto.Z(dom,selector);
}
var $=function(selector){
return zepto.init(selector)
}
$.fn = {
css : function(key,value) {
alert(key+':'+value);
return this;
},
html : function() {
return this[0].innerHTML;
}
}
Z.prototype = $.fn;
window.$=$;
})(window);
在index.html 引用该文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prototype</title>
<body>
<div id="div1">div</div>
<p>title1</p>
<p>title2</p>
<p>title3</p>
<p>title4</p>
<!--<script type="application/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<script type="application/javascript" src="my-z.js"></script>
</head>
<script type="application/javascript">
$('#div1').css('font-size','25px').css('color','#1ecc24') //链式调用
alert($('#div1').html())
</script>
</body>
</html>
JS插件扩展
为什么要把原型方法放在$.fn?
- 只有$会暴露在window 全局变量,暴露多个变量容易造成变量的污染
- 将插件扩展到$.fn.xxx这个web api 中,方便使用
示例如下所示:
$.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; i++ ) {
if ( (options = arguments[ i ]) != null ) {
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
if ( target === copy ) {
continue;
}
// 当用户想要深度操作时，递归合并
// copy是纯对象或者是数组
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 如果是数组
if ( copyIsArray ) {
// 将copyIsArray重新设置为false，为下次遍历做准备。
copyIsArray = false;
// 判断被扩展的对象中src是不是数组
clone = src && jQuery.isArray(src) ? src : [];
} else {
// 判断被扩展的对象中src是不是纯对象
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// 递归调用extend方法，继续进行深度遍历
target[ name ] = jQuery.extend( deep, clone, copy );
// 如果不需要深度复制，则直接把copy（第i个被扩展对象中被遍历的那个键的值）
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// 原对象被改变，因此如果不想改变原对象，target可传入{}
return target;
};
$.fn.highlight = function (options) {
// 合并默认值和用户设定值:
var opts = $.fn.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
// 设定默认值:
$.fn.highlight.defaults = {
color: '#d8d030',
backgroundColor: '#ecfdde'
}
验证插件效果:
<script type="application/javascript">
//验证插件扩展
$('#div1').highlight({
color: '#fff',
backgroundColor: '#333'
})
</script>
JS基础——JavaScript原型和原型链及实际应用的更多相关文章
- js基础--javaScript数据类型你都弄明白了吗？绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
- JS基础-该如何理解原型、原型链？
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
- JS基础：闭包和作用域链
简介 一个定义在函数内部的函数与包含它的外部函数构成了闭包,内部函数可以访问外部函数的变量,这些变量将一直保存在内存中,直到无法再引用这个内部函数. 例如: var a = 0; function o ...
- js基础系列之【原型和原型链】
声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 引入问题 一般我们是这样写的: (需求驱动技术,疑问驱动进步) // 构 ...
- JS基础---->javascript的基础(二)
记载javascript的一些基础的知识.我们在春风秋雨中无话不说,又在春去秋来中失去了联系. js中string类型 一.字符方法:charAt() 和 charCodeAt() var strin ...
- JS基础---->javascript的基础(一)
记录一些javascript的基础知识.只是一起走过一段路而已,何必把怀念弄的比经过还长. javascript的基础 一.在检测一个引用类型值和 Object 构造函数时, instanceof 操 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象
1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:
- 二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应
1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...
随机推荐
- DRF-->1 序列化组件的使用和接口设计---get
定义序列化器(本质就是一个类),一般包括模型类的字段,有自己的字段类型规则.实现了序列化器后,就可以创建序列化对象以及查询集进行序列化操作,通过序列化对象.data来获取数据(不用自己构造字典,再返回 ...
- Kudu compaction design
不多说,直接上干货! http://blog.csdn.net/lookqlp/article/details/51438109
- Linux禁ping
A.临时允许PING操作的命令为:# >/proc/sys/net/ipv4/icmp_echo_ignore_all B.永久允许PING配置方法. /etc/sysctl.conf 中增加一 ...
- ZK典型应用场景
1. 数据发布/订阅--动态获取数据 2.Master选举 a). 利用Zk会保证无法重复创建一个已经存在的节点 b). 多个客户端同时创建,创建成功的即是master,并监控master节点,一旦m ...
- Python 科学工具笔记
Python 科学工具笔记 numpy a = numpy.array([1,2,3,4]);// 创建一个numpy的数组对象 此时a.shape显示的值为(4,); 由此得出结论在一维的数组中, ...
- GitKraken使用教程-基础部分(4)
6. 打开现有的Git仓库 点击左上角 File ==> open repo ,出现如图 6‑1的界面: 图 6‑1 打开本地仓库 点击图中的 按钮就会出现一个对话框,如图 6‑2,以 G:\ ...
- Day4下午
不会啊. T1 找规律: 辗转相减,加速. #include<iostream> #include<cstring> #include<cstdio> #inclu ...
- Tiled 地图编辑器使用教程-官方demo
一.Tiled Map Editer 下载地址 http://www.mapeditor.org/download.html 二.官方教程查看 下载安装后,不管windows还是Mac系统都包含官方例 ...
- Controller的使用
- The fifth day
All men cannot be first . 今日单词: first(形容词):第一的:基本的:最早的:(副词):第一:首先 翻译:不可能人人都是第一名. <Only Love>-- ...