文档章节

JavaScript 面向对象学习——1

learn_more
 learn_more
发布于 2014/11/16 14:31
字数 1113
阅读 160
收藏 15

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


© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
2018/10/30
0
0
是时候谈谈JavaScript面向对象了!(我们什么时候更需要它)

前端技术尤其是JavaScript,经常被后端觉得不是正经编程语言,大多数是因为JavaScript是基于函数的语言,因此潜在上使得它在使用和发展上有所局限。 我记得在90年代末和21世纪初,JavaScrip...

Little heaven
05/14
0
0
如何用不到200行代码写一款属于自己的js框架

前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的框架。我们将会学到如下知识点: ...

徐小夕
07/05
0
0
JavaScript开发者应懂的33个概念

简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。 ...

大灰狼的小绵羊哥哥
2018/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

idea下springboot 项目在static目录下添加文件不生效

idea下springboot 项目在static目录下添加文件不生效 问题描述 是这样子的,我的项目目录结构如下: 我在static目录下,创建了index.html和aaaa.jpg这两个文件。然后,启动服务访问 http://l...

wotrd
昨天
4
0
k8s1.14 一、环境

1. 4台虚拟机 (CentOS Linux release 7.2.1511 (Core) ) 192.168.130.211 master 192.168.130.212 node1 192.168.130.213 node2 192.168.130.214 node3 2. 设置服务器hostname 2.1 设置本机......

ThomasCheng
昨天
3
0
盖茨:如果我现在开创一家公司 将会专注于AI

新浪科技讯,北京时间 6 月 26 日凌晨消息,微软联合创始人比尔·盖茨(Bill Gates)在周一接受采访时表示,如果他今天从哈佛大学辍学并开创一家新公司,那么这家公司将会专注于人工智能(A...

linuxCool
昨天
1
0
聊聊feign的Retryer

序 本文主要研究一下feign的Retryer Retryer feign-core-10.2.3-sources.jar!/feign/Retryer.java public interface Retryer extends Cloneable { /** * if retry is permitted, retur......

go4it
昨天
9
0
HyperLogLog简介

  (1)HyperLogLog简介      在Redis 在 2.8.9 版本才添加了 HyperLogLog,HyperLogLog算法是用于基数统计的算法,每个 HyperLogLog 键只需要花费 12 KB 内存,就可以计算接近 2^64 个...

SEOwhywhy
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部