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 函数或程序的事件. 比如说,当用户 ...
随机推荐
- ubuntu安装软件依赖解决
sudo apt-get install -f zsh@zsh:~/Downloads/dist$ sudo dpkg --install Kitematic_0.17.3_amd64.deb (正在 ...
- jQuery源码解读 --- 整体架构
最近学习比较忙,感觉想要提高还是要读源码,所以准备考试这个考试结束就开始读jquery源码啦,加油~
- JMeter远程分布式联机性能测试
测试环境 apache-jmeter-2.13 Java JDK版本:1.8 1. JMeter分布式测试简介 当一个JMeter客户端因网络限制等因素,无法模拟足够的用户对服务器施压时,需要用到J ...
- LeetCode 860.柠檬水找零（C++）
在柠檬水摊上,每一杯柠檬水的售价为 5 美元. 顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯. 每位顾客只买一杯柠檬水,然后向你付 5 美元.10 美元或 20 美元.你必须给 ...
- jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...
- 如何才能够写出优美的C代码呢？
转载自http://developer.51cto.com/art/201601/503802.htm 面向对象的语言更接近人的思维方式,而且在很大程度上降低了代码的复杂性,同时提高了代码的可读性和可 ...
- EditPlus编写PHP使用技巧
1,建立php模板 方法:在EditPlus的文件目录下,新建template.php文件,写入<?php ?>内容保存,再在editplus的模板中 载入应用即可. 2,建立函数自动补齐 ...
- maven常用依赖
HttpServletRequest HttpServletResponse <dependency> <groupId>javax.servlet</groupId&g ...
- Oracle数据库分割字符串function方法
下面我直接上传一串代码源码, create or replace function strsplit(p_value varchar2, p_split varchar2 := ',') --usag ...
- cf914F. Substrings in a String(bitset 字符串匹配)
题意 题目链接 Sol Orz jry 和上一个题一个思路吧,直接bitset乱搞,不同的是这次有了修改操作 因为每次修改只会改两个位置,直接暴力改就好了 #include<bits/stdc+ ...