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

时间: 2024-10-15 13:09:35

JavaScript 面向对象学习——1的相关文章

javascript面向对象学习笔记(二)——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

JavaScript 面向对象学习——2

继承是面向对象的特性(封装.抽象.继承.多态)之一,JavaScript作为面向对象语言自然拥有继承的特性.如果想要真正理解JavaScript的继承机制,那么应该从JavaScript对象的原型说起.     1 prototype 每一个对象都有一个原型属性,当然,不同的浏览器对这个属性包装不一样.比如我们使用 Firefox 或者 Google浏览器就能通过 __proto__ 获取属性指向的实例引用(原型对象).IE浏览器不能通过以上方法获取,并不能说明这个对象不存在!我们知道JavaS

JavaScript面向对象学习——4

对象的创建 1)字面量.2)new.3)Object.create() 属性的访问 1.可以通过点(.)或方括号([」)运算符来获取属性的值.运算符左侧应当是一个表达式,它返回一个对象.对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于方括号来说(「)),方括号内必须是一个计算结果为字符串的表达式,这个字符串就是属性的名字.在ECMAScript 3中,点运算符后的标识符不能是保留字,比如,o.for或o.class是非法的,因为for是JavaScript的关键字,class是保

JavaScript面向对象学习——3

对象基础介绍: 1.对象是JavaScript的基本数据类型.在java中Object是所有对象的基类,在JavaScript中同样,Object是所有对象的基类,那么Object自身属性和方法在所有对象中都会体现,只是不同的类对方法有不同的重写. 2.JavaScript对象是动态的-可以新增属性也可以删除属性-但它们常用来模拟静态对象以及静态类型语言中的"结构体"(struct).有时它们也用做字符串的集合(忽略名/值对中的值). 3.除字符串.数字.true. false. nu

JavaScript面向对象学习笔记

面向对象:变量和属性一样的.属性:属于一个对象变量:属于任何一个人函数:方法:属于一个对象难点:this:当前的方法属于谁,this就是谁的例子window.show = function(){ alert(this);}//this是windowfunction show(){ alert(this);}Object:用来实现对象var obj = new Object();例子:var obj = new Object();obj.name = "zhaobw";obj.age =

Javascript面向对象学习笔记(二)--创建对象(七种模式)

一.工厂模式 考虑到ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节 function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("小码农",18,"

javascript面向对象学习笔记——创建对象(转)

工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki",21,"Software Engi

javascript面向对象学习

1.this指向问题,指向的是当前的方法属于谁,当前的方法属于谁就指向谁!! 例子: oDiv.onclick = function () { this指向的是oDiv,因为这个方法属于oDiv } var obj = new Object();  //构造对象 obj.show=function(){     this====>>这时候的函数属于obj,所以this指向的是obj这个对象 } 2.函数的形式 函数: 方法: 事件处理函数: 构造函数==>函数用来构造对象叫什么构造函数!

JavaScript面向对象-静态方法-私有方法-公有方法-特权方法,学习

var baseClass= function(){ function show(){//私有方法 alert("访问私有方法"); } function showName(){ alert(this.name); } this.showw = function (){//特权方法 showName(); } } //静态方法 baseClass.showStatic = function(){ alert("访问静态方法"); } //公有方法 baseClass