ES6中的extends方法,jQuery中的extend方法

一.ES6中的extends方法

ES6中的extends方法主要是为了实现类的继承,先定义一个类:

class person {
	//构造器
	constructor(name,age,color) {
				super(name,age) //继承自父类的constructor(name,age)
				this.color = color
			}
	//person原型链上的方法
	sayHi(){
		super.sayHi()
		console.log("我喜欢的颜色是"+this.color)
	}
}

现在我们有一个新类son,来继承父类person的方法与属性:

class son extends  person {
	constructor(name,age,color) {
				super(name,age) //继承自父类的constructor(name,age)
				this.color = color
			}
			
			sayHi(){
				super.sayHi()
				console.log("我喜欢的颜色是"+this.color)
			}
}

var s1 = new son('lisi',18,'red')
s1.sayHi()
//我的名字是lisi 我的年龄是18 我喜欢的颜色是red

这里里面有了关键字super来配合完成类的继承.这里说下super关键字的语法:

1. super作为函数调用时，代表父类的构造函数
2. super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

总结:

super关键字的作用:表示父类的构造函数，用来新建父类的this对象

二. jQuery中的extend方法

最近在研究jQuery插件的时候,发现很多的插件里面都用到了extend方法，在这里我们就一起来研究一下这个方法。

定义和用法：
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

语法：

$.extend( target [, object1 ] [, objectN ] )
//指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )

第一种引用场景：实现静态方法，可以为jQuery对象添加方法。

$.extend(target)表示为jQuery类本身添加静态方法。

<!--引入jQuery文件-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //入口函数
    $(function(){
        //一定要注意extend里面是对象
        $.extend({
            min: function (a, b) {
                return a < b ? a : b;
            },
            max: function (a, b) {
                return a > b ? a : b;
            }
        });

        $.min(4,5);  //结果是4

        $.max(5,6);  //结果是6
		
		//会报错，这个方法只有jQuery本身采用才有效，实例化的对象是继承不了的
		$('#box').min();

    })
</script>

第二种场景：这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。

//语法：result对应的是target,item1对应是对象1.....
extend(result,item1,item2…..)

例如：

<script>
    $(function () {
        var object1 = {
            apple: 0,
            banana: { weight: 52, price: 100 },
            cherry: 97
        };
        var object2 = {
            apple:10,
            banana: { price: 200 },
            durian: 100
        };
        // 将 object2 递归合并到 object1中
        $.extend(object1, object2 );
        console.log(object1);
    })
</script>

object1的输出结果是：

我们发现object1对象里面的apple的值发生了改变，原来是0现在是10；原来object2里面的apple值覆盖了object1里面apple的值。如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

第三种应用场景：Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝，为false时表示浅拷贝。

	var object1 = {
		apple: 0,
		banana: { weight: 52, price: 100 },
		cherry: 97
	};
	var object2 = {
		banana: { price: 200 },
		durian: 100
	}; 
	// 将 object2 递归合并到 object1中
	$.extend( true, object1, object2 );
	//输出结果：
	{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

第四种应用场景:我们发现上面的方法都会破坏掉原来object1的结构，为了不破坏原有的结构，很多插件在书写的时候都会在前面添加一个{}空对象，这样两者合并内容会覆盖掉这个空对象。

extend({},item1,item2,……)
extend(bool,{},item1,item2….)

举例：在滑动条插件中作者的处理方法：

var option = {
        color: 'deepskyblue',
        width: '400px',
        progress: 0.3,
        handleSrc: 'img/slider_handle.png',
        isCustomText: false
    };
 
var defaults = {
        width: '400px',
        handleSrc: '../Images/slider_handle.png',
        progress: 0.3,
        isCustomText: false
    };

//作者这样写就将两个对象合并为一个新的对象，并存储赋值给setting
//关于作者为什么这样写两个一模一样的对象，我们后面继续研究
var settings = $.extend({}, defaults, options);

最后一种应用场景：$.fn.extend(item)上边提到的$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。

//语法：
$.fn.extend(item)
//或则
$.prototype.extend(item)

举例：
//需求：当用户在输入框里输入内容的时候，我就让输入框里的内容在控制台显示出来。

<script>
    $(function(){
        $.fn.extend({ //里面放的是对象
           logTextValue : function() {
               $(this).on('click',function(){
                   console.log($(this).val());
               });
            }
        });

        //jQuery实例化的对象调用这个方法
        $('#txt').logTextValue();
    });

</script>

总结：如果想开发插件，那么extend方法很重要。