js面向对象的编程方法和一些比较有用的js插件

一、js 插件

语法代码插件：prism.js：https://prismjs.com/

热力图绘制插件：heatmap：https://www.patrick-wied.at/static/heatmapjs/

实现流程图绘制的插件：go：https://gojs.net/latest/samples/absolute.html

二、面向对象对的JS编程方法

1、采用js原型方法进行js对象定义：实际是将对象定义为函数，需要将函数实例化后才能实现对象实例的获取，实例代码如下示意：

//====================注意：如果采用原型的方式定义对象，在函数中定义的属性需要添加this，指明是对象属性，否则在函数外不可访问=============================
 function protoObj(name, sex, old)
        {
            this.Name = name;
            this.Sex = sex;
            this.Old = old;
        }

//=========采用prototype定义对象的方法需要在函数之外定义，函数内定义是错误的============
 protoObj.prototype = {
            showName: function () {
                alert(this.Name);
            }
        }

/*****也可以在函数内部通过this.方法名称=function(){}的方式定义对象方法，示例如下*********

function protoObj(name, sex, old)
        {
            this.Name = name;
            this.Sex = sex;
            this.Old = old;
            this.showName=function()
            {

                alert(this.name);
            }
        }
*/


//==========================对象的实例化=============
var pObj = new protoObj("rose", "female", 22);

2、采用返回函数的方式也可以实习js对象化编程

 function globalObj(name, sex, old)
        {
//==============注意采用返回函数的方式对象化，属性定义不能采用this.属性名称的方式，直接定义为变量即可================
            Name = name;
            Sex = sex;
            Old = old;
            function showNames()
            {
                alert(Name);
            }

//================在函数外可返回的属性只能通过设置为返回函数的属性后才能访问===========
            showNames.Name = Name;

            showNames.showName = function ()
            {
                alert(Name);
                console.log(Name);
            }

//======注意：需要返回函数时，返回函数的名称，无需附带()，否则只是调用了函数，返回为空==========
            return showNames;
            //this
        }

//============调用并获得函数=======================
  var show = globalObj("halen", "female", 23);
        show.showName();
        console.log(show.Name);

3、两种方法比较 ：

第一种面向对象的方式更容易在对象定义之后对对象的属性和方法进行扩展，但扩展后新实例化的对象才拥有新增的属性和方法；第二种方法直接返回函数，不能对实例化后的函数进行方法及属性扩展，灵活性稍差。

对象扩展示例代码：

protoObj.prototype.extendName = function () {
            alert(this.Name);
        }
        pObj = new protoObj("rose", "female", 22);
        pObj.extendName();

三、js中call()、apply()、bind()的使用

(1)call()与apply()的使用

ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来), call 和 apply 。这两个函数都是在特定的作用域中调用函数,能改变函数的作用域，实际上是改变函数体内 this 的值。call、apply函数的第一个参数均为this指向的对象；

以下示例说明call与apply的使用

1、函数调用

function add(x, y) {
        return x + y;
    }

    //用call 来调用 add 方法
    function myAddCall(x, y) {
        //使用call在myAddCall 函数中调用 add方法，this指向window
        return add.call(this, x, y);
    }

    //apply 来调用 add 方法
    function myAddApply(x, y) {
        //在myAddApply函数中使用apply调用add方法，this指向windows
        return add.apply(this, [x, y]);
    }

//==============call 与apply的差别是：call采用参数调用，apply将参数作为数组传递====
    console.log(myAddCall(10, 20));    //输出结果30
    console.log(myAddApply(20, 20));  //输出结果40

2、改变参数作用域

var name = '小白';

    var obj = {name:'小红'};
    function sayName() {
        return this.name;
    }

//==============将当前对象作为参数调用方法,this 指向window======
    console.log(sayName.call(this));    //输出小白
//==============使用obj对象作为参数调用方法，this指向已实例化的对象obj=====
    console.log(sayName. call(obj));    //输入小红

3、对象继承

 function Person() {
        this.sayName = function() {
            return this.name;
        }
    }

    //子类 Chinese
    function Chinese(name) {
        //借助 call 实现继承，将this指向Person
        Person.call(this);
        this.name = name;

        this.ch = function() {
            alert('我是中国人');
        }
    }

    //子类 America
    function America(name) {
        //借助 call 实现继承
        Person.call(this);
        this.name = name;

        this.am = function() {
            alert('我是美国人');
        }
    }


    //测试
    var chinese = new Chinese('成龙');
    //调用 父类方法
    console.log(chinese.sayName());   //输出 成龙

    var america = new America('America');
    //调用 父类方法
    console.log(america.sayName());   //输出 America

4、call与apply方法的差别

call与apply的差别主要在参数的传递上，call直接传递参数，使用于明确参数个数的调用场合，apply采用数组方式传递参数，使用于不确定参数个数的调用场合；

（2）bind()的使用

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；示例代码如下：

var a = {
	b : function(){
        console.log(this.c); //=====输出hello，此处this 指代b方法所在对象==
		var func = function(){
			console.log(this.c); //=====输出undefined,此处this指代window
		}
		func();
	},
	c : 'Hello!'
}
a.b();  // 直接运行a.b() ,输出   hello 与undefined

绑定对象后运行代码示例：

var a = {
	b : function(){
		var func = function(){
			console.log(this.c);
		}
		func.bind(this)();  //将func中的this指向包含方法的对象，输出 hello
	},
	c : 'Hello!'
}
a.b();  //

this指向总结：

• 一般情况下直接运行函数，函数中this均指向window，如下示例代码中：

 function protoObj(name, sex, old)
        {
            this.Name = name;
            this.Sex = sex;
            this.Old = old;
        }

        protoObj.prototype = {
            showName: function () {
                alert(this.Name);
            }
        }

采用 protoobj（"helen","female",18）的方式直接运行函数this指向就是window，若采用p=new protoobj（"helen","female",18）；方式实例化p,则函数protoobj中对的this指向对象化后的函数protoobj；

• 采用{}方式定义对象，在{}中定义的对象直接方法中this指向的是对象本身，若在方法中继续定义函数，函数中的this指向的是window

四、向函数传递不定长参数

 在JavaScript中使用函数的时候，如果出现不确定传参的数量，可以使用arguments对象进行处理，其中arguments对象的length属性可以得到传递进来的参数。示例代码如下：

if (typeof  arguments[0]==="string")
			alert(arguments[0]);
		if (typeof arguments[0]==="object")
		{			
			for(var items in arguments[0])
			{
				alert(arguments[0][items]);				
			}
		}
		
		if (typeof arguments[0]==="function")
		{
			arguments[0](arguments[1]);
		}
	}
	var ok=show;
	var ha={name:"sex",old:32,sex:"male"};
	executeObj(ha);
	executeObj(ok,'hello');