这 6 点知识让我对 JavaScript 的对象有了更进一步的了解
作者:Valentino Gagliardi 译者:前端小智 来源:valentinog
1. 对象方法 & this
方法只是保存函数值的属性。
简单对象方法
let rabbit = {};
rabbit.speak = function(line) {
console.log("小兔子说: "+ line );
};
rabbit.speak("我还活着。")
输出:
T小兔子说: 我还活着。
对象方法 & this
当一个函数作为方法被调用时,对象会将函数作为属性并立即调用,就像在object.method()
中一样,其主体中的特殊变量this
将指向被调用的对象。
function speak(line) {
console.log(this.type + "小兔子说:" + line)
};
let whiteRabbit = {type: "白色", speak: speak}
whiteRabbit.speak("噢,我真可爱!")
输出:
白色小兔子说:噢,我真可爱!
apply & call
-
apply
和call
可以用于object.method()
-
apply
和call
方法都有一个可用于模拟方法调用的第一个参数 - 实际上第一个参数是用来指定
this
function speak(line) {
console.log(`${this.type}的小兔子说:${line}` );
};
let whiteRabbit = {type: "白色", speak: speak};
speak.apply(whiteRabbit, ["你这个小坏蛋!"]);
speak.call({type: "黑色"}, "嘿嘿,我不坏,你不爱!");
白色的小兔子说:你这个小坏蛋!
黑色的小兔子说:嘿嘿,我不坏,你不爱!
2.Prototype(原型)
- 几乎所有的对象都有一个
prototype
-
prototype
是另一个用作属性的备用源的对象 - 当一个对象访问自身没有属性时,它会从它的
prototype
搜索该属性,如果没有找到就继续从它的prototype
的prototype
查找,依此类推,直到null
为止。
空对象的原型
原型链最终的指向是Object的prototype
, 而Object中的__proto__
是null
let empty = {};
console.log(empty.toString);
console.log(empty.toString());
输出:
[Function: toString]
[object Object]
其他对象(数组、函数等等)的默认属性
- 许多对象没有直接将
Object.prototype
作为自己的原型,但有自己的默认属性 - 从
Function.prototype
派生的函数和从Array.prototype
派生的数组
console.log(Object.getPrototypeOf(isNaN) ==
Function.prototype);
console.log(Object.getPrototypeOf([]) ==
Array.prototype);
输出:
true
true
Object.create 创建具有特定原型的对象
-
protoRabbit
充当所有兔子共享的属性的容器 - 单个兔子对象(如杀手兔子)包含仅适用于自身的属性(在本例中为
type
),并从其原型派生共享属性
let protoRabbit = {
speak: function (line) {
console.log(`${this.type}兔子说:${line}` );
}
}
let killerRabbit = Object.create(protoRabbit)
killerRabbit.type = '杀手'
killerRabbit.speak('准备受死吧!')
输出:
杀手兔子说:准备受死吧!
3.构造函数
— 构造函数原型
- 创建从某个共享原型派生的对象的更方便的方法是使用构造函数
- 在 JavaScript 中,调用前面带有
new
关键字的函数会将其视为构造函数 - 构造函数将其
this
变量绑定到一个新对象,除非它显式返回另一个对象值,否则此新对象将从调用中返回 - 用
new
创建的对象被称为是其构造函数的实例 - 约定将构造函数的名称大写,以便于与其他函数区分开
function Rabbit(type) {
this.type = type;
}
let killerRabbit = new Rabbit("killer");
let blackRabbit = new Rabbit("black");
console.log(blackRabbit.type);
输出:
black
— 默认情况下,构造函数具有Object.prototype
- 构造函数(实际上是所有函数)会自动获取一个名为
prototype
的属性,默认情况下,该属性包含一个从Object.prototype
派生的普通空对象 - 使用此构造函数创建的每个实例都将此对象作为其原型
function Rabbit(type) {
this.type = type;
}
let blackRabbit = new Rabbit("黑色");
Rabbit.prototype.speak = function(line) {
console.log(`${this.type}的兔子说:${line}` );
};
blackRabbit.speak("Boom...一波王炸!");
输出:
黑色的兔子说:Boom...一波王炸!
4. 重写派生属性
— 相同的原型名称
- 如果原型中有同名的属性,则不会更改此属性
- 该属性被添加到对象本身
function Rabbit(type) {
this.type = type;
}
let blackRabbit = new Rabbit("black");
let killerRabbit = new Rabbit("killer");
Rabbit.prototype.teeth = "small";
console.log(killerRabbit.teeth);
// small
killerRabbit.teeth = "long, sharp, and bloody";
console.log(killerRabbit.teeth);
// long, sharp, and bloody
console.log(blackRabbit.teeth);
// small
console.log(Rabbit.prototype.teeth);
// small
下面 console.log(blackRabbit.teeth)
的结果是small
,因为blackRabbit
对象不具有teeth
属性,它继承自Rabbit
对象自己的teeth
属性,值为 small
。
5. 原型的干扰
— 可枚举与不可枚举
let map = {}
function storePhi(event, phi) {
map[event] = phi
}
storePhi('pizza', 0.069)
storePhi('touched tree', -0.081)
Object.prototype.nonsense = 'hi'
for(let name in map) {
console.log(name)
}
console.log('nonsense' in map)
console.log('toString' in map)
输出结果:
pizza
touched tree
nonsense
true
true
toString
没有出现在for/in
循环中,但是in
运算符中返回true
,这是因为 JS 区分可枚举属性和不可枚举属性。
我们通过简单分配创建的所有属性都是可枚举的,Object.prototype
中的标准属性都是不可改变的,这就是为什么它们不出现在这样的for/in
循环中的原因。
let map = {};
function storePhi(event, phi) {
map[event] = phi;
}
storePhi("pizza", 0.069);
storePhi("touched tree", -0.081);
Object.defineProperty(Object.prototype, "hiddenNonsense",
{enumerable: false, value: "hi"})
for (var name in map) {
console.log(name)
}
console.log(map.hiddenNonsense)
输出:
pizza
touched tree
hi
通过使用Object.defineproperty
函数可以定义自己的不可枚举属性,该函数允许我们控制要创建的属性的类型,在该示例中,hiddenNonsense
在 map 中,但在 for...in
中不会显示。
— hasOwnProperty vs in 操作符
const map = {}
console.log("toString" in map)
console.log(map.hasOwnProperty("toString"))
输出:
true
false
hasOwnProperty
方法告诉我们对象本身是否具有该属性,而无需查看其原型,这通常是比in
运算符提供给我们的信息更有用的信息。
因此,如果你对基础对象原型感到困惑时,建议你可以这样写for/in
循环:
for (var name in map) {
if (map.hasOwnProperty(name)) {
// ... this is an own property
}
}
6.无原型对象
Object.create
函数使我们能够创建具有特定原型的对象。我们还可以传递null
作为原型,用来创建不带原型的新对象。
因此,我们不再需要hasOwnProperty
,因为对象拥有的所有属性都是它自己的属性。现在,无论人们对Object.prototype
做了什么,我们都可以安全地使用for/in
循环
var map = Object.create(null);
map["pizza"] = 0.069;
console.log("toString" in map);
// false
console.log("pizza" in map);
// true
原文:https://medium.com/javascript...
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux运维之如何使用ss命令代替netstat
- 对Linux终端使用socks5代理的方法详解
- linux安装xmind的方法步骤
- 对linux下软件(库)的更新命令详解
- Linux环境下Apache服务器配置二级域名的方法详解
- Linux环境下Apache开启https服务的方法详解
- 使用GANs生成时间序列数据:DoppelGANger论文详解
- CentOS 7使用samba共享文件夹的完整步骤
- Linux环境使用crontab命令设置定时周期性执行任务【含php执行代码】
- linux系统报xfs_vm_releasepage警告问题的处理方法
- linux系统报tcp_mark_head_lost错误的处理方法
- Pandas的列表值处理技巧,避免过多循环加快处理速度
- 详解Linux iptables常用防火墙规则
- Linux文件权限与群组修改命令详解
- Spring-IOC-从单例缓存中获取单例 Bean