JS原型链

作者: inh_ | 来源:发表于2017-09-16 00:30 被阅读0次

大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。

今天给大家带来的是:JS原型链

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

JavaScript对象是一个属性的集合,另外有一个隐式的对象:原型对象。原型的值可以是一个对象或者null。一般的引擎实现中,JS对象会包含若干个隐藏属性,对象的原型由这些隐藏属性之一引用,我们在本文中讨论时,将假定这个属性的名称为"__proto__"(事实上,SpiderMonkey内部正是使用了这个名称,但是规范中并未做要求,因此这个名称依赖于实现)。 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个链就是原型链。

先来看看有什么用处

function Foo(){ this.y=2; } Foo.prototype.x=1; var obj3 = new Foo(); obj1.y;//2 obj1.x://1

这里就是用原型链继承了Foo的属性 obj1的原型(proto)会指向Foo的prototype属性 当函数声明的时候——function Foo(){} 实质上在做: 这个函数会有一个prototype属性,且默认会有两个属性 Foo.prototype { constructor:Foo, __proto__:Object.prototype } prototype是函数对象上的预设的对象属性,而原型通常都是其构造器的prototype属性 实例的__proto__属性会指向构造函数的prototype属性

2.知识剖析

ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。

JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined.原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

原型的动态性:对原型对象所做的实时修改都能从实例上立即反应出来。(注意区别添加修改和重写了原型对象)

原型对象包含指向构造函数的指针。a实例包含指向a原型对象内部的指针,使得我们可以访问原型对象的属性。如果让b原型对象等于a对象的实例那我们就可以访问a对象的原型对象及其属性和方法了。同理a的原型对象也可以是通过该种方法从c继承过来...

1.概念 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用 __proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止!

(1)原型:创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。 (2)原型对象:无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。

普通对象和函数对象

JS中万物皆对象,但对象也是有区别的,分为普通对象和函数对象,Object、Function是JS自带的函数对象,上栗子

var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

3.常见问题

原型链怎样实现继承

4.解决方案

原型对象包含指向构造函数的指针,这使得子类可以访问到构造函数中的属性。实例包含指向原型对象的内部的指针。

ex:

a实例包含指向a原型对象内部的指针,使得我们可以访问原型对象的属性。如果让b原型对象等于a对象的实例那我们就可以访问a对象的原型对象及其属性和方法了。同理a的原型对象也可以是通过该种方法从c继承过来...

5.编码实战

先给大家引入一个例子:组合使用构造函数模式和原型模式创建自定义类型

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.friends = ["Lance","Alice"];

}

Person.prototype = {

constructor : Person;

sayName : function() {

alert(this.name);

}

}

实现原型链的基本模式举例:

function SuperType (){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

}

function SubType() {

this.subproperty = false ;

}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue());    //true

6.扩展思考

原型链继承方式存在的问题。以及怎样解决

7.参考文献

《JavaScript高级程序设计》

8.扩展思考

其他实现继承的方法还有哪些?

鸣谢

感谢大家观看


js原型链浅析_腾讯视频

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 从实现角度分析js原型链

    从实现角度分析js原型链 欢迎来我的博客阅读:《从实现角度分析js原型链》 网上介绍原型链的优质文章已经有很多了,...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • JavaScript原型链

    js原型链 原型链是JS面向对象的基础非常重要 所有对象只有__proto__属性,而函数具有prototype属...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

网友评论

    本文标题:JS原型链

    本文链接:https://www.haomeiwen.com/subject/vsuesxtx.html