hn-failte's blog hn-failte's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

hn-failte

前端cv仔
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Webpack

  • React

  • JavaScript

    • new命令原理
    • ES5面向对象
    • ES6面向对象
    • 多种数组去重性能对比
    • JS随机打乱数组
    • 判断是否为移动端浏览器
    • 将一维数组按指定长度转为二维数组
    • 防抖与节流函数
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • 三级目录

    • JavaScript

      • JavaScript之函数尾调用与函数尾递归
      • 一种实现call、apply、bind的方法
      • 实现call、apply、bind
      • JavaScript闭包详解
      • 窗口间的通信与iframe跨域
      • JavaScript逻辑运算符“&&”和“||”短路原则的应用
      • Object原型梳理
        • Object属性
          • 1、Object.prototype
          • 2、Object.name
        • Object方法
          • 1、Object.assign()
          • 2、Object.create()
          • 3、Object.seal()
          • 4、Object.freeze()
          • 5、Object.is()
          • 6、Object.preventExtensions()
          • 7、Object.getOwnPropertyNames()
          • 8、obj.hasOwnProperty()
          • 9、Object.getOwnPropertyDescriptor()
          • 10、Object.getOwnPropertyDescriptors()
          • 11、Object.getOwnPropertySymbols()
          • 12、Object.defineProperties()
          • 13、Object.values()
          • 14、Object.entries()
          • 15、Object.fromEntries()
          • 16、Object.getPrototypeOf()
          • 17、Object.setPrototypeOf()
          • 18、Object.toString()
        • 原型方法
          • 1、apply()
          • 2、arguments
          • 3、bind()
          • 4、call()
          • 5、caller()
          • 6、constructor()
          • 7、length
          • 8、name
          • 9、toString()
          • 10、Symbol.hasInstance
      • JavaScript设计模式之发布&订阅模式
      • JavaScript核心:两链一包
      • JavaScript之正则
      • 字符串拼接性能优化
      • JavaScript变量转换
  • Vue

  • 混合开发

  • 学习笔记

  • 微信小程序

  • 前端
  • JavaScript
  • JavaScript
hn-failte
2019-11-11

Object原型梳理

# Object

最近我建议你读Vue框架的源码,你说你看不懂?什么?Object的方法不会?好吧,来,先来恶补一波Object原型吧~

Object是一种引用数据类型,也是一个构造函数。

# Object属性

# 1、Object.prototype

Object的原型。 Object原型处于原型链的顶端,是所有对象的原型。

# 2、Object.name

返回Object函数名。

# Object方法

# 1、Object.assign()

将两个对象合并,并返回新的对象。 在产生冲突时,后者的属性会覆盖前者。 该方法属于浅拷贝。

var target={name: "failte", age: 18};

var source={sex: "man", age: 22};

var obj = Object.assign(target, source);
1
2
3
4
5

# 2、Object.create()

以对象原型,创建一个新对象。 第一个参数为原型对象,第二个参数为新描述符属性对象。

var obj = {
    this.a="a";
    this.b="b"
};

var nobj = Object.create(obj, {
    name: {
        value: 42,
        writable: true,
        enumerable: true,
        configurable: true
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3、Object.seal()

封装对象。封装后的对象无法增删属性,但可以修改属性。 可以通过Object.isSealed()方法判断对象是否被封装。

var obj = {a: 1};

Object.seal(obj);

obj.b = 'el';

delete obj.a;

console.log(obj);
1
2
3
4
5
6
7
8
9

# 4、Object.freeze()

冻结对象。被冻结的对象增删改属性。 返回和传入的参数是同一对象。 可以使用Object.isFrozen()方法判断对象是否被冻结。

var obj = {a: 1};

Object.freeze(obj);

obj.b = 2;

delete obj.a;

obj.a = 10;

console.log(obj);
1
2
3
4
5
6
7
8
9
10
11

# 5、Object.is()

判断两个对象是否相同。 比较两方为 undefined、null、true、false、相同字符串、同一对象、NaN、+0、0、-0、数字时,返回true,其他情况返回false。

var obj = {a: 1, b: 2};

console.log(Object.is(undefined, undefined));

console.log(Object.is(null, null));

console.log(Object.is(true, true));

console.log(Object.is(false, false));

console.log(Object.is('aaa', 'aaa'));

console.log(Object.is(obj, obj));

console.log(Object.is(NaN, NaN));

console.log(Object.is(-0, -0));

console.log(Object.is(+0, +0));

console.log(Object.is(0, 0));

console.log(Object.is(100, 100));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 6、Object.preventExtensions()

限制对象不可扩展。 可以通过Object.isExtensible()判断对象是否被限制。

var obj = {a: 1, b: 2};

Object.preventExtensions(obj);

obj.c = 3;

console.log(obj);
1
2
3
4
5
6
7

# 7、Object.getOwnPropertyNames()

返回对象可以遍历的属性的键名数组。

ES6的简洁写法为:Object.keys(obj)

var obj = {a: 1, b: 2};

console.log(Object.keys(obj));
1
2
3

# 8、obj.hasOwnProperty()

判断对象是否存在属性

ES6简洁写法:key in obj

var obj = {a: 1, b: 2};

console.log(obj.hasOwnProperty('a')); // ES5

console.log('a' in obj); //ES6
1
2
3
4
5

# 9、Object.getOwnPropertyDescriptor()

查询对象属性的描述符。

var obj = {a: 1, b: 2};

console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
1
2
3

# 10、Object.getOwnPropertyDescriptors()

查询对象的描述符。

var obj = {a: 1, b: 2};

console.log(Object.getOwnPropertyDescriptors(obj));
1
2
3

# 11、Object.getOwnPropertySymbols()

返回对象所有的Symbol值属性键名数组。

var obj = {a: 1, b: 2, [Symbol('a')]: 3};

console.log(Object.getOwnPropertySymbols(obj));
1
2
3

# 12、Object.defineProperties()

定义对象属性。

var obj = {};

Object.defineProperties(obj, "val", {
    value: undefined, // 属性值,默认undefined
    writable: false, // 是否可写,默认false
    enumerable: false, // 是否可枚举,默认false
    configurable: false, // 是否可配置,默认false
    get: undefined, // 该属性的getter,默认undefined
    set: undefined, // 该属性的setter,默认undefined
})
1
2
3
4
5
6
7
8
9
10

# 13、Object.values()

返回对象所有的属性值数组。

var obj = {a: 1, b: 2};

console.log(Object.values(obj));
1
2
3

# 14、Object.entries()

返回对象所有属性与属性值的键值对列表。

var obj = {a: 1, b: 2};

console.log(Object.entries(obj));
1
2
3

# 15、Object.fromEntries()

把键值对列表转换为一个对象。与Object.entries()方法相反。

var obj = {a: 1, b: 2};

var entries = Object.entries(obj);

console.log(Object.fromEntries(entries));
1
2
3
4
5

# 16、Object.getPrototypeOf()

获取对象的原型。相当于直接获取obj.prototype。

var obj = {a: 1, b: 2};

console.log(Object.getPrototypeOf(obj));
1
2
3

# 17、Object.setPrototypeOf()

设置对象的原型。相当于直接设置obj.prototype。

function Animal() {
    this.a = 1;
    this.b = 2;
}

var obj = {};

Object.setPrototypeOf(obj, new Animal());

console.log(obj.a);
1
2
3
4
5
6
7
8
9
10

# 18、Object.toString()

# 原型方法

# 1、apply()

可以修改this的指向,执行并返回改变指向后的函数的运行结果。

原函数的传参以数组的方式传入。

# 2、arguments

返回当前函数的实参列表。

get/set

# 3、bind()

可以修改this的指向,返回改变指向后的函数。

# 4、call()

可以修改this的指向,执行并返回改变指向后的函数的运行结果。

原函数的传参以多个参数的的方式传入。

get/set

# 5、caller()

返回函数的调用环境。

# 6、constructor()

返回当前对象的构造函数。

# 7、length

返回当前函数的形参个数。

# 8、name

返回当前对象的名称。

# 9、toString()

返回当前对象的字符串形式。

# 10、Symbol.hasInstance

判断某对象是否为某构造器的实例。 用它自定义instanceof操作符在某个类上的行为。

获取Function原型的instanceof对应的方法

var func = () => {};
var obj = {};
var log1 = Function[Symbol.hasInstance](func, Function);
var log2 = Object[Symbol.hasInstance](obj, Object);
console.log(log1, log2)
1
2
3
4
5

自定义类,并重写instanceof方法

class My {
	[Symbol.hasInstance](instance) {
		console.log(instance)
		return true;
	}
	constructor() {
		this.a=1
	}
}
var my = new My()
console.log(my instanceof My)
1
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
#Object
上次更新: 2021/08/05, 12:37:41
JavaScript逻辑运算符“&&”和“||”短路原则的应用
JavaScript设计模式之发布&订阅模式

← JavaScript逻辑运算符“&&”和“||”短路原则的应用 JavaScript设计模式之发布&订阅模式→

最近更新
01
基于 Taro 的微信小程序优化指南
02-16
02
搭建一个极简混合开发架构
08-03
03
使用State Hook
04-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 hn-failte | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式