对象、原型与原型链

浠ラ箍发布于2019-08-23 13:58 / 3169人阅读

摘要：的过程创建一个空对象，让指向它，通过，等赋值，最终返回。原型和实例在上面代码中，是原型，是它的实例。实例的对应原型的即所有对象都是的实例，并继承的属性和方法。这个串起来的链就是原型链。

Object.defineProperty

let obj = {
    key0: 0
}
Object.defineProperty(obj, "key1", {
    value: "1",
    writable: false, // 是否可写，默认false。obj.key1="1.0"; 不可写，不起作用
    configurable: false, // 是否可以再次配置，默认false。不能再设置value，writable，configurable等属性
    enumerable: false // 是否可枚举，默认false。不能在（for...in）中遍历
})
console.log(Object.getOwnPropertyDescriptor(obj, "key0")); // {value: 0, writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj, "key1")); // {value: "1", writable: false, enumerable: false, configurable: false}

判断对象是否有指定属性或方法而不是继承的

obj.hasOwnProperty("toString")

获取对象属性的数组

Object.getOwnPropertyNames(obj)

Object.keys(obj) // 获取不到不可枚举（enumerable: false）的属性

Object.assign

assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。同 $.extend();

Object.assign({}, obj); // {key0: "0"}
$.extend({}, obj); // {key0: "0"}

对象和JSON的转化

let xmObj = {
    name: "xiaoming",
    age: 20,
    sex: "男",
    isMarry: false
}
// 序列化成JSON
var res = JSON.stringify(xmObj, null, "  "); // typeof res == "string"
// 解析成对象
var resO = JSON.parse(res); // typeof resO == "object"

先看一段代码

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.work=function(){}

function Programmer(name,age){
    Person.call(this,name,age);
}
Programmer.prototype = new Person();
Programmer.prototype.code=function(){}; // 如果写成对象会覆盖继承来的属性和方法，即赋值为{...}。

let example = new Programmer("码农",24); // 创建实例，example是实例，Programmer是原型。

Object.prototype.sth = function(){}

new的过程：创建一个空对象，让this指向它，通过this.name，this.age等赋值，最终返回this。

原型和实例

在上面代码中，Programmer是原型，example是它的实例。用instanceof检测，有
example instanceof Programmer === true
example instanceof Person === true
example instanceof Object === true

通过example.constructor属性返回对创建此对象的数组函数的引用。
example.constructor===Person
example.constructor===Person.prototype.constructor
但是constructor 属性易变，不可信赖，它可以通过修改prototype而手动修改。

实例的__proto__对应原型的prototype
example.__proto__===Programmer.prototype
example.__proto__.__proto__===Person.prototype即Programmer.prototype.__proto__
example.__proto__.__proto__.__proto__===Object.prototype
所有对象都是Object的实例，并继承Object.prototype的属性和方法。

原型链

找一个属性，首先在example.__proto__去找，如果没有，再去example.__proto__.__proto__找，……，再到Object.prototype，一直到null，即Object.prototype.__proto__ === null。这个串起来的链就是原型链。
比如：example.code、example.work、example.doSth、example.toString都有，而example.foo就为undefined。

私有云云服务器原型原型链原型链原型链继承原型链图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99858.html

《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
【5】JavaScript 函数高级——原型与原型链深入理解（图解）

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解原型与原型链深入理解（图解）原型（prototype）函数的 prototype 属性（图）每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）原型对象中有...

马龙驹 2019-08-23 17:17 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0
JavaScript中的原型与原型链

摘要：前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？国际惯例，让我们先抛出问题：什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧如果文章中有出现纰...

laoLiueizo 2019-08-23 16:58 评论0 收藏0
原型链一：原型与原型链

摘要：说白了，原型就是构造函数用来构造新实例的模板对象。什么是原型链先回答什么是原型。例如这个原型的原型就是这个构造函数的，既这个原型对象。这些原型对象通过像链子一样连起来，就叫做原型链。原型链初步学习这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业的关于原型链的解释请看JavaScript深入之从原型到原型链和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 评论0 收藏0
原型与原型链理解

原型与原型链理解 1. 什么是原型 JavaScript是一种简易的脚本语言，其是由对象构成。每一个JavaScript对象（除null外）都和另一个对象相关联，另一个对象就是原型。也就是说，任何一个对象都有原型这个属性。隐式原型（_proto_）：上面说的这个原型是JavaScript中的内置属性[[prototype]]，此属性继承自object对象，在脚本中没有标准的方式访问[[pro...

YJNldm 2019-08-26 11:44 评论0 收藏0