js 难点之原型理解

构造函数创建对象

我们先使用构造函数创建一个对象:

function Person() { 
} 
var person = new Person(); 
person.name = ‘Kevin‘; 
console.log(person.name) // Kevin

在这个例子中,Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person。

很简单吧,接下来进入正题:

prototype

每个函数都有一个 prototype 属性,就是我们经常在各种例子中看到的那个 prototype ,比如:

function Person() { 
 } 
// 虽然写在注释里,但是你要注意: 
// prototype是函数才会有的属性 
Person.prototype.name = ‘Kevin‘; 
var person1 = new Person(); 
var person2 = new Person(); 
console.log(person1.name) // Kevin 
console.log(person2.name) // Kevin

那这个函数的 prototype 属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 person1 和 person2 的原型。

那什么是原型呢?你可以这样理解:每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。

让我们用一张图表示构造函数和实例原型之间的关系:

在这张图中我们用 Object.prototype 表示实例原型。

那么我们该怎么表示实例与实例原型,也就是 person 和 Person.prototype 之间的关系呢,这时候我们就要讲到第二个属性:

__proto__

这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入:

function Person() {  
} 
var person = new Person(); 
console.log(person.__proto__ === Person.prototype); // true

于是我们更新下关系图:

既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

constructor

指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

为了验证这一点,我们可以尝试:

function Person() {  
} 
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图:

综上我们已经得出:

function Person() {  
}  
var person = new Person();  
console.log(person.__proto__ == Person.prototype) // true 
console.log(Person.prototype.constructor == Person) // true 
// 顺便学习一个ES5的方法,可以获得对象的原型 
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person() {  
}  
Person.prototype.name = ‘Kevin‘;  
var person = new Person();  
person.name = ‘Daisy‘; 
console.log(person.name) // Daisy  
delete person.name; 
console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

var obj = new Object(); 
obj.name = ‘Kevin‘ console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 __proto__ 指向构造函数的 prototype ,所以我们再更新下关系图:

原型链

那 Object.prototype 的原型呢?

null,我们可以打印:

console.log(Object.prototype.__proto__ === null) // true

然而 null 究竟代表了什么呢?

引用阮一峰老师的 《undefined与null的区别》 就是:

null 表示“没有对象”,即该处不应该有值。

所以 Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型,其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为:

顺便还要说一下,图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充三点大家可能不会注意的地方:

constructor

首先是 constructor 属性,我们看个例子:

function Person() {  
} 
var person = new Person(); 
console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,所以:

person.constructor === Person.prototype.constructor

__proto__

其次是 __proto__ ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.__proto__ 时,可以理解成返回了 Object.getPrototypeOf(obj)。

真的是继承吗?

最后是关于继承,前面我们讲到“每一个对象都会从原型‘继承’属性”,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的JavaScript》中的话,就是:

继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

原文地址:https://www.cnblogs.com/Mcrown/p/9798680.html

时间: 2024-11-14 04:39:57

js 难点之原型理解的相关文章

js难点之闭包理解

如何从外部读取局部变量? 闭包就是能够读取其他函数内部变量的函数. 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”. 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中. function outerFun(){ var a=0; function innerFun() {  a++

谈谈JS中的原型

不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O(∩_∩)O~~ 1 function Person(){ 2 } 3 Person.prototype.name = "jingzi"; 4 Person.prototype.age = 20; 5 Person.prototype.sayName = function(){ 6 aler

js中的原型、继承的一些想法

最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享, 一.instanceof 在JavaScript有instanceof运算符,是二元运算符,使用方法 instanceA instanceof A,返回值是布尔值(boolean),含义是判断instanceA是否是A的一个实例,其实质是判断A.prototype===instanceA.__p

对JavaScript闭包和原型理解

最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这就是一个闭包. 官方解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 如: a=function() { var n=1; b=function( n=n+1; alert(n) } return b; } var c=a()aler

JS中的prototype理解

JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子: function People(name){  this.name=name;  //对象方法  this.Introduce=functi

JS中异常处理的理解

[转]JS中异常处理的理解 JS里的异常处理 JS的异常捕获与处理可以从它的 try-catch 语法结构说起,具体形式如下: try{ ... //异常的抛出 }catch(e){ ... //异常的捕获与处理 }finally{ ... //结束处理 } 其中,try块: try块包含的是可能产生异常的代码,在这里面直接或者在里面通过调用函数里间接抛出的异常都可以捕获到.部分浏览器还可以找到具体抛出的位置.详见e.stack. catch块: catch块,是捕获异常,并处理异常的地方,包括

js中的原型与原型链详解

js中的原型与原型链详解 记住下面三句话就可以理解原型: 所有的函数数据类型都天生自带一个属性Prototype(原型)这个属性的值是一个对象,浏览器会默认给他开辟一个堆内存 在浏览器给prototype开辟的堆内存当中有一个天生自带的属性是constructor,这个属性存储的值是当前函数本身 每一个对象都有一个__proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定他是谁的实例,都是Object的实例) 原型链:如果引用构造函数的实例想要查找某个属性p的话: 首

js参数arguments的理解

原文地址:js参数arguments的理解 对于函数的参数而言,如下例子 function say(name, msg){ alert(name + 'say' + msg); } say('xiao', 'hello'); 当调用say()函数时,函数会创建arguments参数数组,这个数组跟形参没有多大关系,即使没有形参, function say(){ alert(arguments[0] + 'say' + arguments[1]); } say('xiao', 'hello');

js 模块化的一些理解和es6模块化学习

模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式(IIFE)的模式,比如单个功能的时候当时想到是不会涉及到全局变量的污染,在封装基础的模块(比如里面的表单验证功能) (function(win){ var obj = {}; function add() { console.log("add"); } obj.add = add; win