作者:zhanhailiang 日期:2013-01-04
JS可以依赖原型链来实现OO语言中的继承概念。
原型链的基本思想是利用原型prototype让一个引用类型继承另一个引用类型的属性和方法。实现原型链的基本模式如下:
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function SubType() {
this.subProperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subProperty;
};
原型链继承的问题很明显,主要就是包含引用类型值的原型。由此例可知,父类的属性会被所有子类实例所共享。(解决方法可以采用 “借用构造函数”来消除该问题)
接下来我们将利用原型链继承来分析jQuery.sub的实现:
// jQuery.sub可创建一个新的jQuery副本,不影响原有的jQuery对象。
// 有两个具体使用jQuery.sub()的应用场景。
// 1.提供完全没有破坏jQuery原有一切的方法;
// 2.用于帮助做jQuery插件封装和基本命名空间。
// 注:jQuery.sub()不会做任何特殊的隔离,所有关于jQuery的sub版本的方法将仍然指向原来的jQuery。
// (绑定和触发仍将通过主jQuery的事件,数据将通过主绑定的元素的jQuery,Ajax的查询和活动将通过主jQuery的运行,等等)
jQuery.sub = function() {
function jQuerySub( selector, context ) {
return new jQuerySub.fn.init( selector, context );
}
// this 指向 jQuery
jQuery.extend( true, jQuerySub, this );
jQuerySub.superclass = this; // jQuery是jQuerySub的父类
jQuerySub.fn = jQuerySub.prototype = this(); // jQuerySub继承jQuery的方法
jQuerySub.fn.constructor = jQuerySub; // jQuerySub instanceOf jQuerySub === true
jQuerySub.sub = this.sub;
// jQuerySub.fn.init是jQuerySub本质的构造函数,就象jQuery.fn.init是jQuery本质的构造函数做法相似
jQuerySub.fn.init = function init( selector, context ) {
if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
context = jQuerySub( context );
}
// jQuery.fn.init创建新的jQuery的副本
return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
};
jQuerySub.fn.init.prototype = jQuerySub.fn;
var rootjQuerySub = jQuerySub(document);
return jQuerySub; // 返回jQuerySub对象
};
接下来给出官方文档给出来的三个例子:
Example: 添加一个jQuery的方法,以便它不会受到外部分。
(function(){
var sub$ = jQuery.sub();
sub$.fn.myCustomMethod = function(){
return 'just for me';
};
sub$(document).ready(function() {
sub$('body').myCustomMethod() // 'just for me'
});
})();
// 注意在jQuery.sub的原型链jQuery.sub.fn上添加方法myCustomMethod并不会出现在jQuery.fn上,
// 从源码来理解,可以将jQuery.sub看做是jQuery的子类,而myCustomMethod方法只定义在jQuery.sub上
typeof jQuery('body').myCustomMethod; // undefined
Example: 改写一些jQuery的方法,以提供新的功能。
(function() {
var myjQuery = jQuery.sub();
myjQuery.fn.remove = function() {
// New functionality: Trigger a remove event
this.trigger("remove");
// Be sure to call the original jQuery remove method
return jQuery.fn.remove.apply( this, arguments );
};
myjQuery(function($) {
$(".menu").click(function() {
$(this).find(".submenu").remove();
});
// A new remove event is now triggered from this copy of jQuery
$(document).bind("remove", function(e) {
$(e.target).parent().hide();
});
});
})();
// Regular jQuery doesn't trigger a remove event when removing an element
// This functionality is only contained within the modified 'myjQuery'.
Example: 创建一个插件,它返回插件的具体办法。
(function() {
// Create a new copy of jQuery using sub()
var plugin = jQuery.sub();
// Extend that copy with the new plugin methods
plugin.fn.extend({
open: function() {
return this.show();
},
close: function() {
return this.hide();
}
});
// Add our plugin to the original jQuery
jQuery.fn.myplugin = function() {
this.addClass("plugin");
// Make sure our plugin returns our special plugin version of jQuery
return plugin( this );
};
})();
$(document).ready(function() {
// Call the plugin, open method now exists
$('#main').myplugin().open();
// Note: Calling just $("#main").open() won't work as open doesn't exist!
});
分享到:
相关推荐
使用js实现继承的七种方式,详细讲解了js中的原型链继承,构造函数继承,组合继承(经典继承),原型式继承,寄生式继承,寄生组合式继承,以及ES6中的继承,描述原理以及实现和要点概述等。
本文实例讲述了js对象继承之原型链继承的用法。分享给大家供大家参考。具体分析如下: 代码如下:[removed] //定义猫的对象 var kitty = {color:’yellow’,bark:function(){alert(‘喵喵’);},climb:...
主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下
原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 代码如下://要继承的对象var parent={name : “baba” say : function(){ alert(“I am baba”);}} //新对象var child = ...
简单的原型链继承代码,适合初学者看
本篇文章小编将为大家介绍JS继承--原型链继承和类式继承,有需要的朋友可以参考一下
JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。...由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链
主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
js原型链与继承解析(初体验).docx
JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下: // 为父类型创建构造函数 function SuperType() { thi
而Object的原型对象用Object.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。原型对象的用途是为每个实例对象存储共享...
原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性。 作用:原型链的存在,主要是为了实现对象的继承。 一、 记住以下5句话...
本文实例分析了Javascript原型链的原理。分享给大家供大家参考,具体如下: 一、JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一...
能学到什么:理解原型链对于 JavaScript 开发者来说非常重要,因为它影响了对象的属性访问、继承和代码复用等方面。通过掌握原型链的概念和工作原理,开发者可以更好地利用 JavaScript 的面向对象特性。 这是一个可...
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。一起跟随小编过来看看吧,希望对大家有所帮助。
Javascript原型链和继承的个人笔记。主要包括function构造函数原理和继承的原理,仅属于个人笔记
js代码-原型链继承demo