JavaScript 面向对象学习——1

拟墨画扇 提交于 2020-02-28 23:44:07

公司项目采用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类型的变量却没有在实例中增加属性呢?


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!