简介

在基于原型的对象系统中,至少包含以下规则:

(1) 一切皆对象

(2) 创建一个对象的方式是找到一个原型对象,并克隆它,而不是通过实例化类

(3) 对象会记住它的原型

(4) 对象会继承它的原型链中的所有内容

创建对象:

  在 JS 中可以通过对象字面量或者构造函数来创建对象

//示例一:通过对象字面量创建对象
var boy = {
name: 'Bob',
sex: 'male'
}
//示例二:通过构造函数创建对象
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
var boy = new Person('Bob', 'male');

一切皆对象

  事实上,在 JS 中并非一切皆对象,这只是一种笼统的说法,由于 JS 引入了两种数据类型:基本类型 ( Undefind、 Null、 Boolean、 Number 和 String ) 和对象类型 ( Object ),对象类型是对象自然不必多说,问题在于基本类型是对象吗?我们先上字符串类型来说明一下:

var str = 'Make life better';
console.log(str.length); //输出 16

按理说 "str" 变量只是一个字符串,但是它却使用了对象才有的 "length" 属性,输出了字符串的长度,因此这里我们有理由把字符串类型看成对象,称为 "包装对象"。这个对象是临时的,也就是说只有在读取它的属性的时候 JS 才会把这个字符串通过 new String() 方式创建成一个字符串对象,一旦引用结束这个对象就被销毁了,换句话说 "包装对象" 的属性是 "只能读,不能写" 的。同理 "Boolean" 和 "Number" 在读取属性的时候也可以通过自己的构造函数来创建自己的一个包装对象,并像对象一样引用各自的属性。

其次,"null" 表示 "空值",对 "null" 执行 "typeof" 操作,输出结果为 "Object",所以我们也可以把 "null" 看成一个对象,称为 "空对象"

最后,"undefind" 表示 "未定义",当我们对变量只声明没有初始化时,输出 "undefind",或者引用一个不存在的属性时,输出也为 "undefind",对 "undefind" 执行 "typeof" 操作的输出结果为 "undefind",这么说来 "undefind" 其实并不属于对象范畴

创建一个对象的方式是找到一个原型对象,并克隆它,而不是通过实例化类

  在 JS 中,"Object.prototype" 是所有对象的原型,我们并不需要关心克隆的细节,因为这是引擎内部负责实现的。我们所需要做的只是显式地调用 var obj1 = {}; 或者 var obj2 = new Object(),此时,引擎内部会从 "Object.prototype" 上面克隆一个对象出来,作为新对象的原型。

示例一:

var obj1 = {};
var obj2 = new Object();
console.log(Object.getPrototypeOf(obj1) === Object.prototype); //输出true
console.log(obj2.__proto__ === Object.prototype); //输出true

每个对象都具有 "__proto__"(前后两个下划线) 属性,它指向该对象的原型,但是它只是一个内部属性,而不是一个正式的对外 API,原则上是不能访问的,这是由于很多浏览器的支持,才把这个属性暴露出来了。在ES5中使用 "Object.getPrototypeOf()" 获取一个对象的原型,在ES6中可以使用 "Object.setPrototypeOf()" 设置一个对象的原型。因此,在这里两者的作用都是一样的,都是获取对象的原型,并且它们的原型都是 "Object.prototype"。

只有函数才有 "prototype" 属性,例如 "Object.prototype"。另外函数也是一个对象,对于函数而言,"__proto__" 属性指向它自己的原型, "prototype" 属性则是通过这个函数构造出来的实例的原型,可以理解为这样一条原型链,"__proto__" 总是指向原型链的顶端,而函数恰好可以延长原型链,于是它将自己 "prototype" 属性指向的对象压入原型链的顶端,自然它构造出来的实例的 "__proto__" 属性指向原型链的顶端,也就是构造函数的 "prototype"属性。

示例二:

function Person(name, sex) {
this.name = name;
this.sex = sex;
}
var boy = new Person('Bob', 'male');
console.log(Object.getPrototypeOf(Person) === Function.prototype); //true
console.log(Object.getPrototypeOf(boy) === Person.prototype); //true

Person 函数继承自 Function 对象,如果这么写就很直观了:

var Person = new Function('name', 'sex', 'this.name = name;this.sex = sex;');

因此 Person 函数的原型指向 Function.prototype,boy 对象是通过 Person 函数构造而来的,因此它的原型指向 Person.prototype。

对象会记住它的原型

  上面已经提到,JS 给所有对象提供了一个 "__proto__" 属性,用于访问它的原型

对象会继承它的原型链中的所有内容

示例:

function A() {}
A.prototype = { name: 'better' };
var a = new A();
console.log(a.name); //输出better

a 对象本身没有 "name" 属性,于是在它的原型,即构造函数的 "prototype" 中去找,如果找到,则停止上溯,输出结果。

面向对象编程

  当要创建两个或多个对象时,如果直接使用字面量或者构造函数方式将会产生不必要的重复代码,例如:

var obj1 = {
name: 'test1',
sayName: function() {
console.log(this.name);
}
}
var obj2 = {
name: 'test2',
sayName: function() {
console.log(this.name);
}
}

"obj1" 和 "obj2" 共享同一个方法 "sayName()",但是它们却占用了两份内存,因此最好是通过构造函数的方式实现私有属性的继承,再通过原型的方式实现共有属性和共有方法的继承,例如:

function CreateObj(name) {
this.name = name;
}
CreateObj.prototype.sayName = function() {
console.log(this.name);
}
var obj1 = new CreateObj('test1');
var obj2 = new CreateObj('test2');

JS基础:基于原型的对象系统的更多相关文章

  1. JS基础-全局内置对象

    对象 JS中有那些内置对象 数据封装类对象 String.Array.Object.Boolean.Number 其他对象 Math.Date.RegExp.Error.Function.Argume ...

  2. JS基础语法---内置对象

    js学习中三种对象: 内置对象----js系统自带的对象 自定义对象---自己定义的构造函数创建的对象 浏览器对象---BOM的时候讲 内置对象: Math Date String Array Obj ...

  3. Js基础知识7-Es6新增对象Map和set数据结构

    前言 JavaScript中对象的本质是键值对的集合,ES5中的数据结构,主要是用Array和Object,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map. Map也是键值对 ...

  4. JS基础_原型对象

    原型prototype 我们创建的每一个函数,解析器都会向函数中添加一个属性prototype 这个属性,对应着一个对象,这个对象就是我们所谓的原型对象 1.如果函数作为普通函数调用prototype ...

  5. js基础篇——原型与原型链的详细理解

    js中的对象分为两种:普通对象object和函数对象function. function fn1(){}; var fn2 = function(){}; var fn3 = new Function ...

  6. JS基础——JavaScript原型和原型链及实际应用

    构造函数 function Stu(name,age){ this.name=name; this.age=age; } instanceof 查看引用类型对象是属于哪个构造函数的方法,通过__pro ...

  7. js基础知识之_对象

    javascript 对象 1.基于对象 一切皆对象,以对象的概念来编程 2.面向对象的编程(oop,Object oriented programming) 1.对象 就是人们要研究的任何事物,不仅 ...

  8. JS基础---常见的Bom对象

    BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分.它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM. 一张图了解一下先 1.wi ...

  9. js基础回顾----原型链和原型

    所有的对象都可以自由扩展属性 (null 除外) 所有的引用类型(对象,数组,函数)都有一个_proto_属性 所有的函数都有一个prototype属性 所有引用类型对象的_proto_属性指向它的的 ...

随机推荐

  1. C#大文件读取和查询--内存映射

    笔者最近需要快速查询日志文件,文件大小在4G以上. 需求如下: 1.读取4G左右大小的文件中的指定行,程序运行占用内存不超过500M. 2.希望查询1G以内容,能控制在20s左右. 刚开始觉得这个应该 ...

  2. 【C#进阶系列】04 类型基础

    关于System.Object 所有类型都从System.Object派生而来. System.Object的公共方法中ToString()一般是返回对象的类型的全名,只有Int32这些类型将其重写后 ...

  3. Android ListFragment实例Demo(自己定义适配器)

    上一篇文章介绍了ListFragment,当中的ListView并没有自己定义适配器,实际上在实际开发中常会用到自己定义适配器,是实现更复杂的列表数据展示. 所以这篇文章添加了自己定义适配器.来进行L ...

  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  5. Android EditText屏蔽默认长按粘贴复制事件

    et.setCustomSelectionActionModeCallback(new ActionMode.Callback()); 添加全部的方法即可,不需要任何改动.

  6. javascript技术难点之this、new、apply和call详解

    讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解 ...

  7. RabbitMQ入门-高效的Work模式

    扛不住的Hello World模式 上篇<RabbitMQ入门-从HelloWorld开始>介绍了RabbitMQ中最基本的Hello World模型.正如其名,Hello World模型 ...

  8. 讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(上)

    前言: 好久没写文章了,最近先是重构IT恋.又重写IT恋中. Sagit框架也不断的更新,调整,现在感觉已完美了了相当的多. 今天不写教程,先简单分享一下技术内容. 1:见Block必有:#defin ...

  9. 花十分钟,让你变成AI产品经理

    花十分钟,让你变成AI产品经理 https://www.jianshu.com/p/eba6a1ca98a4 先说一下你阅读本文可以得到什么.你能得到AI的理论知识框架:你能学习到如何成为一个AI产品 ...

  10. 标签页QTabWidget

    样式: import sys from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import QApplication, QWidget, QTab ...