js高级编程入门理解

1、js有对象吗，如果有对象，如何创建对象，对象里面的内容又是什么。

答：js有对象，通过 new 函数名创建对象，对象里面的内容是prototype上的内容下面我们案例测试

window.οnlοad= function () {
    function  Person(){
       var name="aa";
        var id=1;
    }
    var person=new Person();
    console.log(person);
    console.log(Person.prototype);
}

运行截图可以知道person对象只有一个prototype属性

我们查看函数person.prototype上面的属性发现是和person对象中prototype中的属性一致

由此我们可以总结出js创建的对象是函数prototype上的内容，

prototype上的内容是个json数据。

2、函数的第二个特性，js函数可以动态添加属性，而且添加到prototype
上面的属性是可以被对象继承的，没有添加到prototype上面函数对象不可
能被继承。下面我们来看个案例

window.οnlοad= function () {
    function  Person(){
    }
    var person=new Person();
    person.name="nike";
    Person.prototype.id=1;
    var person1=new  Person();
    console.log(person.name);//js一大特性对象可以动态添加属性
    console.log(person.id);
    console.log(person1.id);//对象通过prototype添加属性可以实现继承
    console.log(person1.name);//没有通过prototype不能继承，会报错
    person.prototype.id=1;//因为prototype中的属性是个json数据，

	//而json对象中不具有prototype属性，所以报错
 
  
}
 
  运行结果 
  
 
  
 
  
3、动态添加属性的运用，我们知道 面向对象的语言有一个标志，即拥有类的概念，而类有一个特性就是有包名，但是在js中没有包的概念，
 
  
但是通过js对象可以动态添加属性的原理，我们可以自定义命名空间。下面我们来看一个实现命名空间的小案例
 
  
 
  
 
  
    function namespace(namespaceString){
        var temp = [];//声明了一个空的数组
        var array = namespaceString.split(".");
        for(var i=0;i
 
  
}
运行结果 
  
 
  

 
  

4、上面我们提到了prototype属性实现继承，那么现在我们开始深入了解下继承，我们知道java实现面向对象编程无非就是多态继承机制。那么在js中如何实现
 
  
 
  
将父亲的东西给儿子呢，下面我将通过prototype特性一个小案例，将已有的添加到新新曾的属性中去，这里描叙的不是很清楚（大家看案例消化）。我感觉在这里这么说可以更好的理解，就是将几个对象组合（或者叫合并机制）；想必看过编程思想的也知道面向对象中也有组合这种思想。
 
  
 
  
namespace("jsu.java.xiaozuo");
jsu.java.xiaozuo.extend = function(destination,source){
    if(typeof destination == "object"){//destination是一个json对象
        if(typeof source == "object"){//source是一个json对象
            //把source中的每一个key,value值赋值给destination
            for(var i in source){
                destination[i] = source[i];
            }
        }
    }
    if(typeof destination == "function"){
        if(typeof source == "object"){
            for(var i in source){
                destination.prototype[i] = source[i];
            }
        }
        if(typeof source == "function"){
            destination.prototype = source.prototype;
        }
    }
    return destination;
}
var destination = jsu.java.xiaozuo.extend({
    cc:'cc'
},{
    aa:'aa',
    bb:'bb'
});

console.log(destination.aa);


var destination2= jsu.java.xiaozuo.extend(destination,{
    dd:'dd'
});
console.log(destination2.aa)
console.log(destination2.dd)
输出结果： 
  
 
  

 
  
5、下面简单介绍下回调，个人水平有限，只是知道分装的ajax不知道得到返回结果应该怎么样处理，这种业务逻辑就应该由程序员去制定，那么我们可以在方法中传递一个函数，在方法内部，当得到结果时执行该函数（个人与java相比的话，与java中的泛型目的类似，当我们在写基类时，确实不知道子类将传递一个什么给我们的时候，这时候泛型就帮我们解决了这个问题）
 
  
 
  
如jquery中的$("").post(url,type,function); 应用场景可以这么理解吧，当我们在分装一个通用的功能时，但是在函数内部某些业务逻辑我们不知道怎么做时，这是我们就可以运用回调函数解决这个问题。
 
  
6、下面接着另外一个重要的知识点。
 
  
闭包的概念：
 
  
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
 
  
说了概念大家可能有点闷，下面我就两个应用场景来讲下闭包的重要性，
 （1）继承的封装
 
  
上面可以说进行了初步的使用，命名函数的实现就是一个继承的分装。 
 
  
（2）匿名函数
 
  
将匿名函数之前我们先将下面三个概念理清楚下
 
  
 
  
一、函数声明、函数表达式、匿名函数
 
  
函数声明：function fnName () {…};使用function关键字 声明一个函数，再指定一个函数名，叫函数声明。
 
  
函数表达式 var fnName = function () {…}; 使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。
 
  
匿名函数：function () {}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。
看了第三个的定义大家都蒙了，这样的函数我们该如何调用呢。 
  
匿名函数的调用这样的，上案例吧，
 
  
(
    function(num){
        alert(num);
    }
)(3);
 
  
 
  
运行结果：
 
  

 
  
没错就是这样调用的，而且可以传递参数。
 
  
现在让我们通过闭包演示下一个类似于javabean类把
 
  
(function(window){
	function Person(){
		return {
			setName:setName,
			getName:getName
		};
	}
	/**
	 * 公开的函数
	 * @param {Object} name
	 */
	function setName(name){
		this.name = name;
	}
	function getName(){
		return this.name;
	}
	/**
	 * 私有函数
	 */
	function aaa(){
		
	}
	function bbb(){
		
	}
	//给window对象动态的添加了一个属性Person
	window.Person = Person;
})(window);
var Person = window.Person();
Person.setName("aaa");
alert(Person.getName());
 
  
 
  
7、jquery内核讲解
 
  
 
  
 
  
//低版本中jquery内核解析 jQuery JavaScript Library v1.4.2
//看到这里我们会发现jquery本身是一个闭包函数，
(function( window, undefined ) {
// Define a local copy of jQuery
//在内部表达式中jquery返回了jquery对象。
var jQuery = function( selector, context ) {
      // The jQuery object is actually just the init constructor 'enhanced'
      return new jQuery.fn.init( selector, context );
   },
   //在jquery prototype属性上添加方法，实现继承。
   //fn是jquery上的一个属性，这个属性指向了jquery的prototype
   //jquery选择器构造出来的对象，就像是利用jquery构造器构造
   //出来的对象一样，这些对象可以继承jquery.fn或jquery.prototype上的方法
   jQuery.fn = jQuery.prototype = {
      each: function( callback, args ) {
          return jQuery.each( this, callback, args );
       },

       ready: function( fn ) {
          // Attach the listeners
          jQuery.bindReady();

          // If the DOM is already ready
          if ( jQuery.isReady ) {
             // Execute the function immediately
             fn.call( document, jQuery );

          // Otherwise, remember the function for later
          } else if ( readyList ) {
             // Add the function to the wait list
             readyList.push( fn );
          }

          return this;
       },
   }
   // Expose jQuery to the global object
   //这里实际是在window对象上添加了jquery和$两个属性，这两个属性的值
   //jquery构造器。我们能想象$("");就是调用了上面的构造器方法，返回了
   //一个jquery对象,继承了prototype上的方法。
    window.jQuery = window.$ = jQuery;

    })(window);
 
  
 
  
 
  
 
  
 
  

 
  
下面我们就对jquery进行插件扩展，如下通过闭包函数，就在jquery上和jquery.prototype及jquery对象上添加了alert（）方法。
 
  
(function($){
$.alert = function(msg){
window.alert(msg);
}

$.fn.alert = function(msg){
window.alert(msg);
}
 })($);
 
  
到这里jquery的高级基础入门结束了，下面有个较为复杂一点的案例
 
  
(function(jQuery){
	jQuery.fn.myeach = function(callback){
		var array = $(this);
		for(var i=0;i