JavaScript 原型和原型链的定义和使用

Stella981
• 阅读 543

目录

  • JavaScript 原型和原型链的定义和使用

  • 01 原型

  • 原型定义

  • 原型实例理解

  • 书写方法1:属性单个定义

  • 书写方法2:属性多个定义

  • 02 原型链

  • 原型链定义

  • 原型链实例理解

  • 最终原型问题

  • 03 原型和原型链的使用

  • 应用举例

JavaScript 原型和原型链的定义和使用

01 原型

原型定义

原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法(原型也是对象)。

属性

用法

描述

prototype

构造函数名.prototype

可以理解为函数的原型对象

__proto__

对象名.__proto__

指向该对象的原型

constructor

对象名.constructor

指向关联的构造函数,实例原型指向构造函数

JavaScript 原型和原型链的定义和使用

原型实例理解

书写方法1:属性单个定义

//书写方法1:
函数名.prototype.属性名 = 属性值;
函数名.prototype.方法名 = function () {···};

代码示例:

Person.prototype.LastName = 'xiao';
Person.prototype.say = function () {
    console.log('haha');
}
function Person() {}//构造函数
var person = new Person();//对象

控制台运行截图:
JavaScript 原型和原型链的定义和使用

书写方法2:属性多个定义

//书写方法2:
函数名.prototype = {
    属性名:属性值,
    ···
    方法名:function () {···},
    ···
}

代码示例:

Person.prototype = {
    LastName: 'Zhang',
    FirstName: 'San',
    age: 12,
    say: function () {
        console.log('xixi');
    }
}
function Person() {
// 若原型里有该属性,而自己也有属性,则选择自己的
    this.LastName = 'Li';
}
var person = new Person();

控制台运行截图:
JavaScript 原型和原型链的定义和使用

02 原型链

原型链定义

当对象找不到需要的属性时,它会到这个对象的父对象上去找,以此类推,这就构成了对象的原型链。并且Object.prototype是对象的最终原型绝大多数对象最终都会继承自Object.prototype,而Object.prototype的原型是null
JavaScript 原型和原型链的定义和使用

原型链实例理解

代码示例:

Grand.prototype.LastName = 'wang';
function Grand() {
    this.name = 'wanger';
}
var grand = new Grand();

Father.prototype = grand;
function Father() {
    this.name = 'xiaoming';
}
var father = new Father();

Son.prototype = father;
function Son() {
    this.hobbit = 'song';
}
var son = new Son();

控制台运行截图:
JavaScript 原型和原型链的定义和使用
在运行截图中,可以看到到从Son到Grand原型链后的最终原型是Object.prototype。

最终原型问题

在探讨最终原型问题之前,需要了解一种可以创建类对象的方法:

var obj = Object.create(原型,特性(可省略));
//特性:属性的一些特性,如可读可写等

代码示例1:指定原型是对象(boss),则同其他方法创建对象方法一样,系统会有自带的__proto__属性。即当obj自己身上找不到属性的时候,就去boss身上找,因为obj的原型是boss。

function Boss() { } //构造函数
var boss = new Boss(); //对象
var obj = Object.create(boss); //指定原型是对象,则同其他方法创建对象方法一样,系统会有自带的__proto__属性

控制台运行截图:
JavaScript 原型和原型链的定义和使用

代码示例2:指定原型为null,则系统不会自动生成__proto__属性,就算后期添加该属性也没用。

var obj1 = Object.create(null); //指定原型为null,则系统不会自动生成__proto__属性,就算后期添加该属性也没用

控制台运行截图:
JavaScript 原型和原型链的定义和使用

03 原型和原型链的使用

利用原型特点和概念,可以提取共有属性,减少代码冗余。而且可以通过XXX.prototype.方法名来对系统的自带方法进行重写或者在原型链上自定义一些方法。

Object.prototype.方法名
Number.prototype.方法名
Array.prototype.toString.方法名
Boolean.prototype.toString.方法名
String.prototype.toString.方法名

应用举例

实现数组去重功能,并且在原型链上编写。

var arr = [1, 1, 3, 1, 2, 2, 3, 2, 4, 5, 3, 4]
Array.prototype.unique = function() {
    var temp = {},
    arr = [],
    len = this.length;
    for (var i = 0; i < len; i++) {
        if (!temp[this[i]]) {
            temp[this[i]] = 'true';
            arr.push(this[i]);
        }
    }
return arr;
}

控制台运行截图:
JavaScript 原型和原型链的定义和使用
个人总结,欢迎大家交流探讨!

点赞
收藏
评论区
推荐文章
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
Stella981 Stella981
2年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
可莉 可莉
2年前
23.JavaScript原型和原型链
1.原型:prototype,所有的函数都有一个属性prototype,称之为函数原型默认情况下,prototype是一个普通的Object对象默认情况下,prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身functionTest(){}Test.prototype:函数Test的原型Test.pr
Wesley13 Wesley13
2年前
JS函数高级
原型与原型链所有函数都有一个特别的属性:prototype:显式原型属性所有实例对象都有一个特别的属性:__proto__:隐式原型属性显式原型与隐式原型的关系函数的prototype:定义函数时被自动赋值,值默认为{},即用为原型对象
Wesley13 Wesley13
2年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Stella981 Stella981
2年前
JavaScript原型和原型链——构造函数
一、instanceof:判断引用类型(数组、对象、函数)的变量是由哪一个 构造函数派生出来的。(oinstanceofObject)二、原型规则和示例  1、所有的引用类型(数组、对象、函数),都具有对象特性,可以自由扩展属性(除了"null“以外)。  2、所有的引用类型(数组、对象、函数),都具有\_\_p
Stella981 Stella981
2年前
JavaScript 基于原型链的继承
JavaScript对象是动态的属性“包”(指其自己的属性)。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。遵循ECMAScript标准,someObject.Prototype
Wesley13 Wesley13
2年前
JS基础——原型和原型链
1、相关知识点(1)构造函数 (函数名首字母大写表示构造函数)functionFoo(name,age){this.namename;this.ageage;this.class'class';//returnthis;默认有这一行,浏览器帮忙做
Stella981 Stella981
2年前
Javascript 构造函数和类
1.构造函数构造函数的名称一般都是首字母大写挂载在this上面的属性为实例属性,实例属性再每个实例间都是独立的原型链属性通过prototype添加,他是所有实例共享的类方法/静态属性只能由构造函数本身访问当实例属性和原型链上的属性重名时,优先访问实例属性,没有实例属性再访问原型属性大多数浏览器的ES5实现之中,每一个对象都有\_\_pr
Stella981 Stella981
2年前
JavaScript基础之原型对象和原型链
!(https://oscimg.oschina.net/oscnet/64fbb850bccf434ebbf033f599907fb3.png)原型对象!(https://oscimg.oschina.net/oscnet/9994724f3f4d47db8b0e07b93c3250e7.jpg)原型对象简单来说就是