戴景耀【老师讲义】JS面向对象_对象扩展方式$extend-i编程邦
戴景耀学 习 目 标
掌握$.extend
掌握$.fn.extend
封装实例
一$.extend 用来实现继承
语法：$.extend(要实现继承的子对象,被继承的父对象1,父对象2,……)
jQuery.extend(object):为扩展jQuery类本身，为类添加新的属性和方法。
把每个属性循环遍历出来，判断，复制（for in 遍历 见 jQuery 1.11.3源码第201行）
第一种：在当前的$对象上进行扩展
var obj={ title:"obj的title", sum:function() { var c=0 for(var i=0;i<arguments.length;i++){c=c+arguments[i] } return c; }}// 现在可以把上面的until这个方法 继承给$,目的是在全局都可以使用$.extend($,obj);// 简写// $.extend(obj);console.log($.title)// 通过$.sum()调用，如果成功，则继承成功，也就是在$上增加了我们自己的方法console.log($.sum(1,2,3,4))
第二种对象之间的继承
// $.extend(要实现继承的子对象,被继承的父对象1,父对象2,……)var obj1={name:"张三",sex:"男"}var obj2={name:"李四",msg:"welcome"}var obj3={obj3Fn:function(){ console.log("obj3的方法") }}$.extend(obj1,obj2,obj3,{age:18})console.log(obj1)console.log(obj2)//只有obj1继承了console.log(obj3)//只有obj1继承了
在对象上扩充对象
Console.log($)会打印出一个函数
$ 和jQuery是什么，是对象还是函数，其实即是对象也是函数
其实$是函数，函数也是对象，我们在继承的时候演示过在函数上扩展属性
// $.extend又是什么意思?
function $$(){}$$.myid=10console.log($$.myid)$$.myextend=function(){ // 循环每一个传入进来的参数 对象 for(var i=0;i<arguments.length;i++){ console.log(arguments[i]) // 如果小于等于1,就把第一个传进来的对象继承给第0个对象 if(i<=1){for(var key in arguments[1]){ console.log(arguments[1][key]) arguments[0][key]=arguments[1][key]} }else{ // 如果大于1,就把 从第二个开始的每一个对象继承给第一个for(var key in arguments[i]){ console.log(arguments[i][key]) arguments[0][key]=arguments[i][key]} } }}var a={sex:"男"}var b={age:"333"}var c={foo:function(){console.log("第三个对象")}}$$.myextend(a,b,c)console.log(a)//a就继承了b,c这两个对象a.foo()
调用名为 $.extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件（如:$.ajax()则是通过此方法在$上进行扩展的一个方法）
开始的例子:
var obj={ title:"obj的title", sum:function() { var c=0 for(var i=0;i<arguments.length;i++){c=c+arguments[i] } return c; }}$.extend($,obj); // 简写$.extend(obj);var jquerySum=$.sum(1,2)
二$.fn.extend
1．$.extend是指向全局对象$来进行扩展
2．jQuery.fn=jQuery.prototype
3．Console.log($.fn)===Console.log($.prototype)
4．Console.log($.fn===jQuery.prototype) //true
5．$.fn.extend是扩充jQuery原型对象当中的东西
6．原型对象扩展后的属性和方法需要怎样调用？必须通过实例化调用
7．jQuery如何得到实例化对象？通过$(“选择器”)会得到一个实例化的jQuery对象，也就是说jq里面的很多方法，必须要实例化后才能调用的，必须要通过$()调用了$这个方法后得到一个实例化对象，比如html() 这些方法
8．例子 $.fn.extend怎么用
var setCssObj={ setCss:function(){ console.log(this.css("width")) this.css("background","red") }}$.fn.extend(setCssObj)$("#box").setCss()//调用时：只有在实例化对象上才有用,实现了 谁调用setCss就可以加背景颜色的功能
三$.extend和 $.fn.extend之间的关系
1．$.extend({dd:555})
// 就是在$这个函数上调用上进行扩展// 所以类似于:$.test=function(){} 调用的时候：$.test() function person(){}person.myname="张三";var p=new person()console.log(p.myname)// undefinedconsole.log(person.myname)// 张三
2．$.fn.extend({ff:666})
// 就是在$.prototype上进行扩展 // 类似于:$.prototype.test=function(){} 调用的时候：$().test()
3．因为原型上面的方法必须实例化后才能调用。$()就是实例化
function foo(){}foo.prototype.test=function(){ alert(1)}new foo().test()//弹出1
-END-
更多往期精彩资讯，点击阅读更多
↓↓↓↓↓↓
■一次记住JS的6个正则方法■【老师讲义】day04_JSOO面向对象-设计模式概述■初级前端与高级前端的区别究竟有多大？
......