js高级编程入门理解

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

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

window.onload= 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.onload= 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;//<span style="color:#ff0000;">因为prototype中的属性是个json数据，</span>

<span style="color:#ff0000;"></span><pre name="code" class="html" style="font-size: 30px;"><span style="color:#ff0000;"><span>	</span>//而json对象中不具有prototype属性，所以报错</span>

}

运行结果

3、动态添加属性的运用，我们知道 面向对象的语言有一个标志，即拥有类的概念，而类有一个特性就是有包名，但是在js中没有包的概念，

但是通过js对象可以动态添加属性的原理，我们可以自定义命名空间。下面我们来看一个实现命名空间的小案例

function namespace(namespaceString){
var temp = [];//声明了一个空的数组
var array = namespaceString.split(".");
for(var i=0;i<array.length;i++){
temp.push(array[i]);
/**
* 把多个json对象添加了window上
*/
eval("window."+temp.join(".")+"={}");
//把多个function添加到了window上
//eval("window."+temp.join(".")+"=function(){}");
}
}
namespace("jsu.java.xiaozuo");
jsu.java.xiaozuo.test=function(){
console.log("小左");
};
jsu.java.xiaozuo.test();

}

运行结果

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<array.length;i++){
//this代表当前正在遍历的对象
callback.call($(array[i]),$(array[i]));
}
}
/**
* @param {Object} obj  可以来自于利用jquery的选择器创建的jquery对象，也可以来自于一个数组(来源于后台)
* @param {Object} callback
*/
jQuery.myeach = function(obj,callback){
var array = obj;
for(var i=0;i<array.length;i++){
//this代表当前正在遍历的对象
callback.call($(array[i]),$(array[i]));
}
}
})(jQuery);

$().ready(function(){
$("div").myeach(function(){
//this代表当前正在遍历的div对象
alert($(this).text());
});

$.myeach($("div"),function(e){
alert($(e).text());
});
});