js高级编程入门理解
2016-09-26 13:30
561 查看
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()); }); });
相关文章推荐
- web入门之十 JS高级编程基础
- web入门之十 JS高级编程基础
- web入门之十 JS高级编程基础
- JS的高级编程
- 安卓航班Android开发经典教程大总结2----游戏基础入门及高级编程
- js 高级编程-属性/变量-访问权限
- 原文作者乔纳森·丹尼可(Jonathan Danylko)是一位自由职业的web架构师和程序员,编程经验已超过20年,涉足领域有电子商务、生物技术、房地产、医疗、保险和公用事业。正如乔纳 森在文中所言,本文适合刚毕业的大学生和刚入门的程序员。如果你已是高级
- C#轻松入门(四)面向对象的高级编程
- 【转】Unix环境高级程序设计入门----文件系统的相关编程(上)
- 第2篇 入门-tinyos编程思想(我对TinyOS1.x的理解,个人心血之作)
- js高级编程------------使用prototype仿java对象实现表单验证
- JS入门基本教程(适合没编程基础新手)
- Unix环境高级程序设计入门----文件系统的相关编程(上)
- 推荐一本学习Linux高级编程入门的书籍
- js高级编程中命名空间的两种用法
- JS高级编程学习日志(第5章 在浏览器中的JS)
- JavaScript高级编程入门
- Unix环境高级程序设计入门----文件系统的相关编程(下)
- js高级编程笔记
- js高级程序设计--匿名函数和闭包理解