谈谈我对JS原型的理解

昨天阿里实习的第一次电面,也是我人生中的第一次电面,问了很多问题。结果还行吧,算是进入了下一轮。虽然不知道姓名,但还是要感谢面我的那个前辈。好吧,言归正传,为什么要写这篇关于原型的博文呢?因为电面时被问到了。当时有点紧张,感觉回答的很不理想,也许是自己还没有牢固的掌握吧!所以今天就写一写我对原型的理解,顺便理一下自己的思路。

首先,JS没有类继承机制,它是靠原型机制实现继承的,两种方式孰优孰劣,在此不做评判(知识量不足╮(╯▽╰)╭)

先上代码解释这一机制:

var people = {
    name: ‘xiaoliu‘
};

对于JS中所有对象,都有一个内部属性(供解释器使用)_proto_,这个属性指向新建对象的原型,people对象字面量的原型是什么呢,它是Object.prototype。

如图:

当我们想执行toString()方法时,JS解释器做了什么呢?首先它会到peope对象里去找,即去找people里的自有属性,当找到了就去调用该方法,没找到,就到它_proto_所引用对象里去找,找到了,他就执行原型里的这个方法(子类属性覆盖父类属性)。所以我们说people对象继承了object.prototype里的方法,但是我更推荐大家这么说Object.prototype是所有对象(people)的原型。

下面咱们来做这么一件事:

people.toString = functino(){};

JS解释器会做什么呢,他还会到原型上找到toString属性然后赋值么。当然不行,这样做的话,所有继承了Object.prototype的对象的toString属性都会改变。因此赋值时JS解释器就直接看people对象里的自有属性有没有,如果有,改。如果没,就新建一个属性赋值。

上代码证明:

var people = {
    name: ‘xiaoliu‘
};

console.log(people.hasOwnProperty(‘toString‘));/*赋值前 false*/

people.toString = function(){};

console.log(people.hasOwnProperty(‘toString‘));/*赋值后 true*/

这样查找属性和属性赋值都没问题了,原型继承就这么实现了。

不过JS是不允许我们随意修改对象的原型链的,ES5中Object对象上有个getPrototypeOf()方法可以查看原型,但是无法修改。

下面再说说JS怎么初始化新建对象的原型的:

首先, 是对象字面量,上面已经说了,原型初始化成Object.prototype对象。

其次, 是利用对象模板(函数),使用new 运算符创建的对象,它会初始化成为该函数的prototype属性所指向的对象。

代码实例:

function People(){

  this.name = ‘xiaoliu‘;
}/*对象模板*/

People.prototype = {    constructor: People,/*原来People.prototype指向的对象中默认的唯一不可枚举属性,现在修改了prototype的引用,所以最好再恢复一下*/    toString: function(){return this.name}};/*修改原型*/

var people = new People();/*创建对象*/

people.toString();/*执行继承方法*/

最后,是通过ES5提供的Object.create()方法

代码实例:

var people = {name: ‘xiaoliu‘};

var a = Object.create(people);/*创建一个新对象,并把原型_proto_初始化为people对象*/

a.name;/*返回原型链上的name属性*/

好吧,先到此为止吧,以后有机会再谈谈this。

如有错误,欢迎指正^_^

时间: 2024-10-12 15:40:27

谈谈我对JS原型的理解的相关文章

37.浅谈js原型的理解

浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没学过c++或者Java之类的更接触底层的语言,那就不要太深究,理解会用自然可以了,当接触到更多语言时慢慢的会理解越来越深刻! 下面我就举例分享一下prototype的概念!知道对于初学者知道这些就足够了! 分析一下,上面这个例子!我们可以知道 People的类型是一个对象!按照j

浅谈Js原型的理解

一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没学过c++或者Java之类的更接触底层的语言,那就不要太深究,理解会用自然可以了,当接触到更多语言时慢慢的会理解越来越深刻! 下面我就举例分享一下prototype的概念!知道对于初学者知道这些就足够了! 分析一下,上面这个例子!我们可以知道 People的类型是一个对象!按照javascript的

Js原型的理解

一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面的专有名词!如果你没学过c++或者Java之类的更接触底层的语言,那就不要太深究,理解会用自然可以了,当接触到更多语言时慢慢的会理解越来越深刻! 下面我就举例分享一下prototype的概念!知道对于初学者知道这些就足够了! 分析一下,上面这个例子!我们可以知道 People的类型是一个对象!按照javascript的

JS 原型的 理解

1.理解原型对象 我们创建 函数时,函数有一个 prototype(原型)属性,指向一个原型对象.在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针. function Person(){ } 就拿前面的例子来说,Person.prototype. constructor 指向 Person.而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法. Person.prototype.name =

谈谈我对JS闭包的理解

这一篇博客承接上一篇,如果大家没看上一篇,建议看看.....直通车..... 好吧,咱们一起来看看这个闭包,这次我们的重点并不是弄明白闭包是什么?而是搞清楚JS的闭包是怎么产生的.接着上一篇博客的示例: var a = function(x){ var b = 'bb'; var inner = function(){ var c = 'cc'; }; return b; }; 当a函数执行到给inner变量赋值匿名函数之后,形成下面的引用关系,直接复用上次博客的图: 从上图很容易看出,这时候i

谈谈我对JS作用域的理解

Javascript语言在设计之初,就将函数设计成一种包含可执行代码逻辑的特殊对象.作为对象,函数可以像普通对象变量一样拥有可以编程读写的属性,也可以像普通变量一样传递.被引用.但是问题也来了,当函数执行时,解释器如何对代码内部的标示符进行解析呢?JS是这样做的,当函数对象被创建时,或者说函数被定义时,函数对象内部不仅包含了代码逻辑,还定义了一个内部属性[[Scope]]引用了一条作用域链(可以理解成为一个对象列表).如果这个函数在全局环境下被定义,那这个作用域链里就只有全局作用域. 这样说比较

JS原型链理解

1. 每个对象都有原型属性(__proto__)2. 对象的原型(__proto__)指向其构造函数(Class)的prototype属性3. 构造函数(Class)的prototype属性本身也是一个对象,其原型(__proto__)亦指向其构造函数的prototype4. 如此形成一个链式结构,而Class.prototype若没有自定义构造函数,则其始终是一个对象,构造函数为Object,  原型为Object.prototype5. Object.prototype的原型为null,原型

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向