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 函数或程序的事件. 比如说,当用户 ...
随机推荐
- usually study notebook
2018/01/02 删除用户经验: 1,vi /etc/passwd ,然后注释掉用户,观察一个月,以便于还原,相当于备份. 2,把登入shell改成/sbin/nologin. 3,openlda ...
- maven 如何将自己的jar包添加到本地仓库
1 准备一个需要添加到本地仓库的jar包 我这里准备了一个名为mail.jar 的jar包,放到E:\Install Files目录下面 2 下面演示如何将准备的jar包添加到本地仓库 1 语法 mv ...
- jQuery学习心得
表示在document.ready时执行代码 $(function(){ //1.取得要操作的对象(尽量只限制范围),如果对象多次使用要记得缓存 var $selector = $('selector ...
- C语言实现通用链表初步(三)----单元测试
前两节,我们已经完成了链表的一些操作,快来测试一下吧. 这里使用的单元测试工具名字叫"check". START_TEST(my_slist_1) { struct student ...
- The function getUserId must be used with a prefix when a default namespace is not specified 解决办法
The function getUserId must be used with a prefix when a default namespace is not specified 解决方法: 1. ...
- WebService的搭建,部署,简单应用和实体类结合使用
WebService:一种跨编程语言和操作系统平台的远程调用技术,SOAP.WSDL(WebServicesDescriptionLanguage).UDDI(UniversalDescription ...
- 基于springmvc开发注解式ip拦截器
一.注解类 @Documented @Target({ElementType.TYPE,ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) ...
- iview 中 select 值不对
<Select v-model="formValidate.departmentId" @on-change="selectDepartment"> ...
- （二）JavaScript之[函数]与[作用域]
3].函数 /** * 事件驱动函数. * 函数执行可重复使用的代码 * * 1.带参的函数 * 2.带返回值的函数 * 3.局部变量 * * 4.全局变量 * 在函数外的:不用var声明,未声明直接 ...
- Android开发由eclipse转Android Studio中一些常见出错问题解决方法
1.给一个Activity添加了一个Dialog主题,结果出现了下面的问题,在eclipse却没有出错 <activity android:name=".DialogActivity& ...