JavaScript面向对象(3)

全局对象

我们知道在对象方法内部可以使用this来表示对象本身。

1
2
3
4
5
6
7
8
9
var hero = {
name:'Rafaelo',
sayName:function(){
return this.name;
}
}

>>> hero.sayName();
>>> "Rafaelo"

接下来我们通过构造器函数来创建对象

1
2
3
4
5
6
7
function Hero(){
this.occupation = 'Ninja';
}

>>> var hero = new Hero();
>>> hero.occupation;
>>> "Ninja"

我们可以看出构造器的函数来创建对象有两个比较好的特点:

  1. 可以在创建对象的时候传参数。
  2. 在使用的时候才真正创建和执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Hero(name){
this.name = name;
this.occupation = "Ninja";
this.whoAreYou = function(){
return "I'm " + this.name + " and I'm a " + this.occupation;
}
}

//创建不同的对象
>>> var h1 = new Hero("xiaohong");
>>> var h2 = new Hero("xiaoming");
>>> h1.whoAreYou();
>>> "I'm xiaohong and I'm a Ninja";
>>> h2.whoAreYou();
>>> "I'm xiaoming and I'm a Ninja";

假如我们在调用构造函数的时候忽略了new操作符

1
2
3
>>> var h = Hero('xiaohong');
>>> typeof h
>>> "undefined"

没有使用new操作符,因此我们不是在创建一个新对象,这里Hero和一个普通函数没什么区别,所以h就是这个Hero函数的返回值。

那么在这种情况下,Hero函数内这个this引用的是什么呢?

我们知道有全局变量,程序的宿主环境一般会为其提供一个全局对象,而全局变量只不过是全局对象的一个属性罢了。

1
2
>>> var a = 1;
//也可以window['a']或者window.a来访问

在Web浏览器中,window就是全局对象。这里的this其实指向了这个window对象。所以此时this.name的name成了全局变量。这就是为什么函数中没有声明var的变量是全局变量。

instanceof操作符

通过instanceof操作符,我们可以测试一个对象是不是由某个指定的构造器函数所创建的。

1
2
3
4
5
6
7
8
9
>>> function Hero(){}
>>> var h = new Hero();
>>> var o = {};
>>> h instanceof Hero;
>>> true
>>> h instanceof Object;
>>> true
>>> o instanceof Object;
>>> true

注意,这里不是调用函数,所以instanceof后面跟函数名。不要这样用(h instanceof Hero())

内建构造函数

内建构造器函数大致上可分为三个组:

  • 数据封装类对象:包括Object、Array、Boolean、Number和String以及undefined和null.
  • 工具类对象:包括Math、Date、RegExp等。
  • 错误类对象:异常发生时的特殊错误类对象。

Object对象

Object对象是JavaScript中所有对象的父级对象,这意味着我们创建的所有对象都继承自它。

下面两行执行结果是等价的:

1
2
var o = {}
var o = new Object();

实际上空对象没有什么实质作用,Object对象包含了一些方法和属性,比如toString(),valueOf()方法。

所有字面量创建的对象(非 function 声明)都直接连接到 Object.prototype

Function对象

我们知道函数是对象,函数对象内建构造器是Function(),我们可以将它作为创建函数的另一种备用方法。

下面三种定义函数的方式是等效的:

1
2
3
4
5
6
7
8
9
10
11
12
function sum(a, b){
return a + b;
}
>>> sum(1, 2);

var sum = function(a, b){
return a + b;
}
>>> sum(1, 2);

var sum = new Function('a', 'b', 'return a + b;');
>>> sum(1, 2);

之前我们使用call或者apply方法将父对象的构造函数绑定在子对象上来实现继承。

1
2
3
4
5
6
7
8
9
10
11
12
function Animal(){
this.species="动物"
}

function Cat(name, color){
Animal.apply(this, arguments);
this.name=name;
this.color=color;
}

var cat1 = new Cat("大黄", "yellow");
alert(cat1.species);

其实call()和apply()是Function对象的内置方法,call和apply只是在传参形式上有所不同,下面代码是等效的

1
2
Animal.apply(this, ['a', 'b', 'c']);
Animal.call(this, 'a', 'b', 'c');

这样实现继承的原理是,Cat方法调用的时候,Animal中的this就会被自动设置为Cat对象的引用。

arguments对象

上面我们看到我们可以直接使用arguments对象来传递函数参数,尽管arguments看上去是一个数组,但实际上它是一个类似于数组的对象。arguments是一个单纯的数组,没有sort(),slice()等这样的方法。另外,arguments中有一个callee属性,该属性引用的是当前被调用的函数对象,如果我们所创建的函数返回值是arguments.callee,那么该函数在调用的时候就会返回自身引用。

1
2
3
function f(){
return arguments.callee;
}

我们可以通过arguments.callee属性来实现匿名函数递归调用。

1
2
3
4
5
6
7
8
(
function(count){
if(count<5){
alert(count);
arguments.callee(++count);
}
}
)(1)

异常

和 Java 类似, JavaScript 也提供了一套异常处理机制,例如:

1
2
3
4
5
6
7
8
9
var add = function(a, b){
if(typeof a !== 'number' || typeof b !== 'number'){
throw{
name: 'TypeError',
message: 'add needs numbers'
};
}
return a + b;
}

throw 语句会中断函数的执行,它抛出一个 exception 对象,该对象包含异常类型和异常描述,当然也可以添加其他属性。

1
2
3
4
5
try{
add(1, 'a');
}catch(e){
document.writeln(e.name + ':' + e.message);
}

给类型增加方法

JavaScript 允许给基本类型增加方法,前面我们已经知道可以通过给 Object.prototype 增加方法, 同样的我们可以给 Object 增加方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if(typeof Object.beget != 'function'){
Object.beget = function (o){
var F = function(){
this.nickname = 'HHH';
//nickname = 'HHH';
};
F.prototype = o;
return new F();
}
}

var stooge = {
"first-name": "Jerome",
"last-name": "Howard",
'nickname': 'OOO'
}
var another_stooge = Object.beget(stooge);
another_stooge['first-name'] = 'Harry';
another_stooge['last-name'] = 'Moses';
//another_stooge.nickname = 'Moe';

//document.writeln(another_stooge['first-name']);
document.writeln(another_stooge.nickname);

上面我们给 Object 增加了一个 beget 方法, 这个中间使用 原对象(F)作为原型(stooge)的新对象,你会发现一个有趣的现象,最后一行访问到了 stooge 的 nickname。

为了探索这个问题,我们在 F 函数中添加一个 nickname 如下:

1
2
3
4
5
6
7
Object.beget = function (o){
var F = function(){
this.nickname = 'HHH';
};
F.prototype = o;
return new F();
}

结果输出 HHH ,上面过程充分说明了 JavaScript 的原型委托,首先会从原对象 F 对象中查找 nickname, 如果找不到,则会委托给 prototype 指向的 stooge 对象查找。

这里提出一个问题,如果将上面的代码修改如下,也就是去掉 this 关键字, 输出会如何变化:

1
2
3
4
5
6
7
8
Object.beget = function (o){
var F = function(){
- this.nickname = 'HHH';
+ nickname = 'HHH';
};
F.prototype = o;
return new F();
}

结果发现输出了 OOO, 实际上这里的 nickname 此时是一个全局变量了,总结一下:如果定义对象的属性就要用 this,如果作为局部变量就要用 var, 否则是全局变量。

同样的我们可以给 Function.prototype 增加方法来让对所有函数可用:

1
2
3
4
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
}

评论

3D Adapter Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout AsyncTask Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK CSS Camera Raw Canvas Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Elements Error Exception Extensions File FileProvider FileSave Flow Fresco GCC Git Git flow GitHub GitLab Github flow Gitlab flow Glide Gradle GrideView Groovy HTML HTML5 Handler HandlerThread Hexo Hilo Hybrid I/O IDEA IO ImageMagick ImageView IntelliJ Intellij Intent Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux ListView Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO Next Nodejs ObjectAnimator Okhttp Oracle VM Permission PhotoShop Physics Process Python RGB RS-232 RTU RecyclerView Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SQLite SSH SharePreference Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue CLI Vue.js Web WebGL Web前端 Workbench Zdog api apk axios background blur bookmark by关键字 cli compileOnly component computed css css3 c语言 databases demo flex flexbox flow gradient hexo hotfix html iOS icarus icarus主题 implementation init jQuery javascript launchModel linear logo merge methods mvp offset photos pug query radial rxjava2 scss servlet shell slot slot-scope svg tkinter tomcat transition unicode utf-8 v-slot vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 书籍 事件 享元模式 亮度 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 入坑 内存 内核 内部分享 函数 函数式编程 分支 分析 列表 创建 删除 动画 单例模式 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图形图像 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 对比度 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工作流 工具 工厂模式 年终总结 开发技巧 开发流程 异常 弱引用 思想 恒星 打包 扫盲 技巧 指令 指针 接口 插件 插值 插槽 摄影 操作系统 攻略 故事 数据存储 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 最佳实践 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 混合模式 渐变 渲染 游戏 源码 源码分析 滤镜 瀑布流 灰度 热修复 版本 版本回退 版本控制 状态栏 状态模式 生活 界面 留言板 直方图 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统概述 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 编程 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 背景 背景混合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 色调 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 走马灯 转换 软件工程 软引用 过滤器 运算符 进程 迭代子模式 适配器 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 饱和度 高斯模糊 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×