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 函数或程序的事件. 比如说,当用户 ...
随机推荐
- (转)AIX下的MPIO、RDAC、SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系)
AIX下的MPIO.RDAC.SDDPCM多路径软件操作 (AIX下的MPIO,查看AIX下hdisk与盘柜卷lun的对应关系) 原文:http://blog.163.com/huangbao_007 ...
- MVC HtmlHelper listbox用法
主要实现MVC listbox左右移动,搜索左边用户 controller List<userinfo> lstUserInfo = new List<userinfo>( ...
- linq to entity 左连接 右连接 以及内连接写法的区别
左连右连还是内连这个其实你不需要关心.只需要根据实体的映射关系写查询,框架会自动帮你生成的. 至于linq查询语法与扩展方法的效率,应该是一样的,比如: var users=(from u in db ...
- Day5下
T1 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> ...
- Git提交代码到主分区
git 提交代码,本地新建一个my分支,不从本地master分支直接上传,而是先从本地my分支上提交至本地master分支,然后本地master提交至远程master分支 上.前提是远程只有一个mas ...
- Oracle 求昨天 上个月 去年 日期
到公司发现有一个报表没有收到,查看后发现原来是Oracle数据源异常. ' day, 'yyyyMMdd') AS enddata FROM DUAL; 上面这个sql求上个月今天和昨天.一般情况下不 ...
- DO、PO、BO、DTO、VO等概念
PO 全称为:Persistant Object,持久化对象,与数据库结构映射的实体,数据库中的一条数据即为一个 PO 对象. BO 全称为:Business Object,业务对象,主要作用是把业务 ...
- Intellij IDEA 配置jrebel热部署
Jrebel 先介绍一下jrebel,jrebel是可以热部署项目的一个工具,更改代码自动部署并不需要重启项目(在spring中的controller中,增加.修改方法都是可以进行热部署而不需要重启的 ...
- 初识JavaScriptOOP（js面向对象）
初识JavaScriptOOP(js面向对象) Javascript是一种基于对象(object-based)的语言, 你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言 ...
- 粗看ES6之JSON
标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...