一、JS继承、函数扩展

1.JS继承

1). 构造继承(单继承、多继承):call方法和apply方法

参考: http://www.cnblogs.com/mofish/p/3507861.html

2). 原型链继承、实例继承、拷贝继承、组合继承、寄生组合继承

参考: http://www.cnblogs.com/humin/p/4556820.html

2.JS函数扩展

函数扩展是给document上的对象或属性添加、绑定函数以处理简单的需求,比如给String或Number添加一个是否存在指定数组里面进行判断返回Boolean值,如PHP中就有in_array()这个函数。但我们可以写一个类似in_array()函数来判断是一个值否在函数中。

// JS判断一个值是否存在数组中

// 定义一个判断函数
var in_array = function(arr){
  // 判断参数是不是数组
  var isArr = arr && console.log(
      typeof arr==='object' ? arr.constructor===Array ? arr.length ? arr.length===1 ? arr[0]:arr.join(','):'an empty array': arr.constructor: typeof arr 
    );
  
  // 不是数组则抛出异常
  if(!isArr){
    throw "arguments is not Array"; 
  }
  
  // 遍历是否在数组中
  for(var i=0,k=arr.length;i<k;i++){
    if(this==arr[i]){
      return true;  
    }
  }
  
  // 如果不在数组中就会返回false
  return false;
}
  
// 给字符串添加原型
String.prototype.in_array = in_array;
// 给数字类型添加原型
Number.prototype.in_array = in_array;
  
// 声明一个数组
var arr = Array('blue','red','110','120');
  
// 字符串测试
var str = 'red';
var isInArray = str.in_array(arr);
alert(isInArray); // true
  
// 数字测试
var num = 119;
var isInArray = num.in_array(arr);
alert(isInArray); // false

二、Jquery函数扩展、继承

1.  简单函数扩展

//直接基于jQuery的扩展,判断是否为空 
$.isBlank = function(obj){ 
    return(typeof(obj)=='undefined'||obj==''||obj==null); 
} 
//直接基于jQuery的扩展,去除html标签,保留内容 
$.htmlContent = function(tag){ 
    var reTag = /<(?:.|\s)*?>/g; 
    return tag.replace(reTag,""); 
} 
//直接基于jQuery的扩展(方式二) 
$.xy = { 
    sayhello:function(){return "hello";}, 
    saybaybay:function(){return "baybay";} 
}; 
//jQuery类级别的扩展 
$.extend({ 
    add:function(a,b){return a+b;}, 
    diff:function(a,b){return a-b} 
}); 
//jQuery对象级别的扩展 
$.fn.extend({ 
    getvalue:function(){ 
    return this.val(); 
  } 
});

参考: http://www.jb51.net/article/94389.htm

2.函数继承 extend

1).extend(dest,src1,src2,src3…srcN) ,合并多个对象

为jQuery.extend(css1,css2)为例,css1,css2各有一些属性(方法照样会如此处理,这里只讲属性).
extend函数会把css2有而css2没有的属性加到css1中,如果css2的某个属性与css1的某个属性名称享用,就会用css2的属性去覆盖css1的同名属性。css1就是最后的整和对象。或者也可以用 :

var newcss = jquery.extend(css1,css2);//newcss就是合并的新对象。 
var newcss = jquery.extend({},css1,css2);//newcss就是合并的新对象.

而且没有破坏css1的结构。

//用法: jQuery.extend(obj1,obj2,obj3,..)

var Css1={size: "10px",style: "oblique"}   
var Css2={size: "12px",style: "oblique",weight: "bolder"}   
$.jQuery.extend(Css1,Css2)

//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: “12px”,style: “oblique”,weight: “bolder”}

2). extend(boolean,dest,src1,src2…),深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

// 以前的 .extend()

jQuery.extend(      
    { name: “John”, location: { city: “Boston” } },     
    { last: “Resig”, location: { state: “MA” } }      
);

// 结果:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的 .extend()

jQuery.extend( true,      
     { name: “John”, location: { city: “Boston” } },     
     { last: “Resig”, location: { state: “MA” } }     
);

 

// 结果
// => { name: “John”, last: “Resig”,
//      location: { city: “Boston”, state: “MA” } }

与其他的类库不同的是,jQuery的extend方法提供了“深层拷贝”的功能,如果你传入的第一个参数为boolean型变量,则该变量为深层拷贝的标志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深层拷贝),并且dest和src元素都包括相同名称的对象属性,则对该对象属性的方法和属性再进行一次复制。