首页 > 代码库 > JavaScript 面向对象学习——1
JavaScript 面向对象学习——1
公司项目采用Ext,结果本人发现入门不易!尤其是采用JavaScript编写面向对象程序,经常使用jQuery的知道,jQuery是面向函数编程的,所以很容易入门。然而,Ext是面向对象的,那么,当你想要自定义Ext组件的时候,或者使用Ext组件的时候就会很苦恼。所以,要先学习Javascript面向对象基础,其次查看Ext源代码。
这将是后期的学习路线,博客路线。
1 Javascript是基于原型(Prototype based)的面向对象的语言,Java语言,是基于类模式(Class based)。那么,我们不能采用类似于Java那样一个子类继承父类就能继承父类的属性和方法。不管怎么样,实例化一个对象,都可以采用new的方式完成。
2 Javascript类的定义就是函数的定义,问题来了,类与函数到底有什么差异?难道我调用一个函数是实例化一个对象吗?所以,这里我要特作笔记,把这两点区分开来!
function Father(name , age){ var sex ; // 私有属性,局部变量 this.name = name; // 成员属性 this.age = age; // 成员属性 sex = ‘man‘; this.setSex = function(value){ sex = value; // 赋值私有属性 }; this.getSex = function(){ return sex; // 返回私有属性的值,外面无法直接通过实例获取属性的值 }; return name+‘_‘+age+‘_‘+sex; // 函数返回值,对象实例时这个没有作用 } var f1 = new Father(‘maven‘,‘12‘); // 实例化一个对象 var f2 = Father(‘svn‘,‘21‘);// 调用函数 console.info(f1); // 对象结构 console.info(f2);// 函数返回值 console.info(f1.sex); // 无法获取私有属性 console.info(f1.name);// 获取成员属性 console.info(f1.getSex());// 获取成员方法 console.info(f2.sex);// f2只是一个字符串返回值,所以下面调用都是错误的 console.info(f2.name); console.info(f2.value);
总结:
1)直接调用函数,实质上返回的是函数的返回值,在函数中定义的方法、属性都不可以在外面访问。因为一个函数就是一个作用域块,在函数调用时这个代码块在内存中运行,函数运行结束,作用域块内部的局部变量被回收。所以无法访问里面定义的属性和方法。
2)采用new方式,因为Javascript没有类的定义,我们只是把函数定义当做类的定义看待。采用new时,系统会在内存的栈中开辟一个空间来存储对象的属性与方法,同时返回对象的引用。所以,类定义时注册的属性、方法并不会被垃圾回收机制回收,那么对象就能调用之前注册的属性与方法了。
3 this的指向
// 调用以上代码 console.info(name); // 输出svn console.info(this.name);// 输出svn console.info(f1.name);// 输出maven console.info(f2.name);// 输出maven // 调用以上代码 console.info(getSex());// 输出‘man’ console.info(this.getSex());// 输出‘man’ console.info(f1.getSex()); // 输出‘man’ console.info(f2.getSex()); // 错误
总结:
1)函数作用域块中采用this来定义该属性的作用域,然而this具体指向谁还需要看怎么使用!
2)如果是通过new一个对象的方式运行函数的定义,那么这个函数中的this指向当前对象;
3)如果是自己调用函数运行,那么这个this指向调用该函数的对象,在这里因为我们声明了全局对象,所以是window调用了该函数,那么this指向window
4)总而言之:除了new之外,其他的this都是指向直接调用者,【谁调用了我,谁就是this】;还有注意的是:如下:
father.son.sing();
在sing方法中如果有this,那么这个this指向son,因为是son直接调用了sing不是father。
所以,我们在项目开发中,一般不会直接使用this,而是使用 var me = this ; 这样每次都调用 me , 而不会混淆this的指向了。
3 关于var定义变量为私有成员
我相信学习过Javascript的人都知道,如果采用var定义一个全局变量,实质上会在window对象中添加一个属性。但是,为什么我们在函数定义个var类型的变量却没有在实例中增加属性呢?
JavaScript 面向对象学习——1