12-9 你对原型链了解吗？

已于 2022-06-15 16:30:03 修改
阅读量128 收藏
点赞数
分类专栏： 面试 文章标签： 原型模式 javascript 前端
于 2020-12-10 16:54:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46736220/article/details/110925341
版权

文章目录

首先了解构造函数，原型对象，实例对象的关系

每个函数都有 prototype 属性，该属性指向原型对象；
原型对象自带的constructor指回函数；
实例对象的非标准属性__proto__也是指向原型对象（和prototype指向一样）。

原型和原型链
原型好处：所有的实例对象可以共享它的属性和方法；
原型链：它是js继承重要依据，当我们访问对象的属性或方法时，先在对象内部寻找，如果没有就找prototype，在没有，就找prototype的prototype，这样一层一层往上找的关系就形成了原型链。

JS继承方式（6种）

原型链继承

优点：继承父类的属性和方法，也继承父类原型上的方法和属性
缺点：(1) 原型属性在所有实例中是共享的，其中一个实例改变，其他实例也会跟着改变
（2）没办法给父类传参

 // 父类
function Father(){
    this.name = 'baba';
    this.colors = ["red", "blue", "green"]; 
}
Father.prototype.getName = function(){
    return `my name is ${this.name}`
}
// 子类
function Son(age){
    this.age = age
}
// 原型链继承父类
Son.prototype = new Father();  //继承了SuperType的所有属性和方法
// 子类自己添加新方法
Son.prototype.getAge = function (){
    return `my age is ${this.age}`
}

// 实例化对象
var s = new Son(18);
var s2 = new Son(28);

console.log(s.name); //baba
console.log(s2.name); //baba
console.log(s.age)  //18
console.log(s2.age)  //28
console.log(s.getName())  //my name is baba
console.log(s.getAge()) //my age is 18
 
console.log(s.colors)  //[ 'red', 'blue', 'green' ]
s.colors.push('yellow')
console.log(s.colors)  //[ 'red', 'blue', 'green', 'yellow' ]
console.log(s2.colors)  //[ 'red', 'blue', 'green', 'yellow' ]
借助构造函数继承

方法：在子类型构造函数的内部通过使用 apply()和 call()等方法调用超类型构造函数。
优点：
(1) 每个实例不会共享属性，其中一个实例改变属性另一个实例不受影响；
(2) 子类可以向父类传递参数。
缺点：不能继承父类原型上的属性和方法

// 父类
function Father(name){
    this.name = name;
    this.colors = ["red", "blue", "green"]; 
    this.say = function (){
        console.log('gua~gua~gua')
    }
}
Father.prototype.getName = function(){
    return `my name is ${this.name}`
}
// 子类
function Son(name,age){
    Father.call(this,name)  //借助构造函数继承
    this.age = age
}

// 子类自己添加新方法
Son.prototype.getAge = function (){
    return `my age is ${this.age}`
}

// 实例化对象
var s1 = new Son('lily',18);
var s2 = new Son('tom',28);

console.log(s1.name)  //lily
console.log(s1.age)  //18
s1.say()  //gua~gua~gua
console.log(s1.getAge())    //my age is 18
// console.log(s1.getName())   //不能访问父类原型上的属性和方法   s1.getName is not a function


s1.colors.push('yellow')
console.log(s1.colors)  //[ 'red', 'blue', 'green', 'yellow' ]
console.log(s2.colors)   //[ 'red', 'blue', 'green' ]
组合式继承

方法：原型链继承 + 借助构造函数继承 结合
优点：既可以传参又可以复用（属性方法不被共享）
缺点：耗内存（子类构造函数被多次调用）

// 父类
function Father(name){
    this.name = name;
    this.colors = ["red", "blue", "green"]; 
    this.say = function (){
        console.log('gua~gua~gua')
    }
}
Father.prototype.getName = function(){
    return `my name is ${this.name}`
}
// 子类
function Son(name,age){
    Father.call(this,name)  //借助构造函数继承
    this.age = age
}
// 原型链继承
Son.prototype = new Father();
Son.prototype.constructor = Son;    //将 constructor指回 Son

// 子类自己添加新方法
Son.prototype.getAge = function (){
    return `my age is ${this.age}`
}

// 实例化对象
var s1 = new Son('lily',18);
var s2 = new Son('tom',28);

s1.colors.push('black')
console.log(s1.colors)  //[ 'red', 'blue', 'green', 'black' ]
console.log(s2.colors)  //[ 'red', 'blue', 'green' ]
console.log(s1.getName())  //my name is lily
console.log(s2.getName())  //my name is tom
原型式继承

本质是浅拷贝，在es5中，新增了一个函数Object.create()实现了原型式继承
优点： 兼容性好，最简单的对象继；
缺点：
① 多个实例共享属性；
② 无法传参

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"],
    sayname: function () {
        console.log(this.name);
    }
};
var p1 = Object.create(person);
var p2 = Object.create(person, {
    name: {
        value: "Greg"
    }
});
//相当于：
//var anotherPerson =  Object.create(person);
//anotherPerson.name = "Greg";
p2.friends.push("Rob");
p1.friends.push("Barbie");

console.log(person.friends);   //[ 'Shelby', 'Court', 'Van', 'Rob', 'Barbie' ]
p2.sayname();  //"Greg"
寄生式继承

把原型式继承再次封装，然后在对象上扩展新的方法，再把新对象返回
实例对象不仅具有 person 的所有属性和方法，而且还有自己的 sayName()方法。
缺点：
(1) 在createAnother()中为对象添加函数，不能做到函数复用
(2) 由于是浅复制person对象，pp的改变会影响person对象

//封装继承函数
function createsunny(obj) {
    var clone = Object(obj);  //通过Object()创建一个新对象
    clone.sayName = function() {
         //添加自己的方法
         console.log(this.name);
     };  
     return clone;  //返回这个对象
}  

var person = {
    name: "lily",     
    friends: ["Shel", "Court", "Van"] 
};  
var pp = createsunny(person); 
pp.name='sunny';
pp.friends.push('Barbie');

console.log(person.name); //sunny
console.log(person.friends); // ["Shel", "Court", "Van", "Barbie"]
console.log(pp.name); //sunny
console.log(pp.friends); // ["Shel", "Court", "Van", "Barbie"]
pp.sayName(); //sunny
寄生组合式继承（最理想的继承方式）

通过借用构造函数来继承属性，通过“ 原型链 ”来继承方法，不同的是，这里的“ 原型链 ”本质上是使用寄生式继承来继承超类型的原型
优点：
(1) 既能具有组合继承的优点，又可以不必两次调用超类型的构造函数
(2) 避免了在 SubType.prototype 上面创建不必要的、多余的属性（在原型链继承时，SubType.prototype被重写为SuperType的实例，因此具有了他的实例属性）

function inheritPrototype(subType, superType) {
    var copy= Object(superType.prototype); //创建新对象
    copy.constructor = subType; //增强对象
    subType.prototype = copy; //指定对象 
}

① 通过浅复制创建超类型原型的一个副本（copy）
② 将副本的constructor 属性重新指向subType（在原型链继承中，constructor指向superType）
③ 把副本赋值给subType的原型

// 父类
function Father(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
    this.say = function () {
        console.log('gua~gua~gua')
    }
}
Father.prototype.getName = function () {
    console.log(`father's name is ${this.name}`)
}
// 子类
function Son(name, age) {
    Father.call(this, name)  //借助构造函数继承
    this.age = age
}
inheritPrototype(Son, Father); //调用函数代替原型链继承
// 子类自己的方法
Son.prototype.sayAge = function () {
    console.log(this.age);
}; 

var sub1 = new Son("tom", 29);
var sub2 = new Son("jerry", 27);
sub1.colors.push("black");

console.log(sub1.colors);      //[ 'red', 'blue', 'green', 'black' ]
sub1.getName();          //father's name is tom
sub1.sayAge();           //29  
console.log(sub2.colors);      //[ 'red', 'blue', 'green' ]
sub2.getName();          //father's name is jerry
sub2.sayAge();           //27
获取原型方法

p.proto
p.constructor.prototype
Object.getPrototypeOf( p)

创建对象方式

字面量
构造函数

new操作符做了什么？
（1）创建一个新对象，在内存中开辟一个空闲的空间
（2）将构造函数的作用域个给新对象（因此this就指向了这个新对象）
（3）执行构造函数中的代码（为这个新对象添加属性）
（4）返回新对象

//函数的名字首字母需要是大写的喔！
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.say = function () {
        alert(this.name)
    }
}
var person1 = new Person('钟女士', 80, '女');
工厂模式
function person(name, age, gender) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.say = function () {
        console.log(this.name)
    }
    return obj;
}
var pp = person('lily',18,'女');
pp.say()
原型模式
function Person() { };
Person.prototype.name = '钟女士';
Person.prototype.age = 80;
Person.prototype.gender = '女';
var person1 = new Person();
console.log(person1)
混合模式（组合使用构造模式和原型模式）
//构造函数模式用于定义实例属性
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
//原型模式用于定义方法和共享的属性
Person.prototype = {
    constructor :Person,
    sayName:function(){
        console.log(this.name)
    }
}
var person2 = new Person('钟女士', 80, '女');
console.log(person2)

call(),apply(),bind()区别？

① call(),apply()直接执行，bind（）需要调用
② call（），bind（）可以接受多个参数，apply（）接受多个参数需要以数组形式
最后一个问题

前端双鱼座
关注
专栏目录
使用OpenSSL创建多级CA证书链签发证书并导出为pkcs12/p12/pfx文件
Laurence的技术博客
03-21 8503
文章目录1. 生成根CA证书并自签2. 生成二级CA证书并使用CA证书签发3. 生成服务器证书并使用二级CA证书签发4. 制作CA证书链5. 打包为p12文件6. 注意事项7. 使用`openssl x509`和`openssl ca`签发CA证书的差别 操作步骤： 生成根CA证书并自签 生成二级CA证书并使用CA证书签发 生成服务器证书并使用二级CA证书签发 制作CA证书链 打包为p12文件 1. 生成根CA证书并自签 # 创建root-ca并自签名 openssl req -x509 -newkey
FPGA原型验证手册：第二章-基于FPGA的原型设计能为我们做些什么？（一）
最新发布
叫好与叫座虽然不是对立面，但想在同一个作品中达到双重效果很难。
04-01 456
作为基于FPGA的原型设计的倡导者，我们可能会偏向于它的好处，而对其缺陷视而不见，然而，这不是我们的意图。FPMM旨在给一个平衡的观点FPGA-based原型的利弊，说到底，如果他们能通过其他方法器目标会更好地满足，例如使用基于SystemC的虚拟原型，我们不想让人们必须要使用一个长原型项目。本章将提供基于FPGA的原型设计的目的和局限性。完成本章后，读者应该深入了解基于FPGA的原型设计对系统级验证的适用性和其他目标的适用性。
数据类型_function_原型与原型链
qq_43260366的博客
03-26 647
目录 1.原型链 (1)原型对象 构造函数批量创建对象存在的问题1：空间浪费 构造函数批量创建对象存在的问题1：全局变量污染 将构造函数的属性/方法放在其原型对象上：解决空间浪费与环境污染 (2)使用原型对象的注意事项 (3)原型链 [1]自定义构造函数实例化对象的原型链 [2]系统内置的Date构造函数实例化对象的原型链 [3]系统内置的Array构造函数实例化对象的原型链 [4]简单数据类型的原型链(基本包装类型) [5]系统内置构造函数Function的原型链 [6]D.
JavaScript面向对象-3
huiguo_的博客
10-17 227
文章目录对象的继承1.定义2.使用方法一：使用函数来实现继承方法二：使用call或者apply来实现继承call和apply的缺点方法三：原型链继承方法原型链继承的缺点解决办法 组合继承 对象的继承 1.定义 JavaScript是没有明确的继承机制，也是通过模仿实现的。 首先父类和子类的构造函数是使用this关键字给所有属性和方法 赋值。为了实现继承，我们可以让父类的构造函数成为子类的方法。然后调用该子类的方法通过this关键字给的属性和方法赋值。这样子类就拥有父类的方法与属性了。 2.使用 方法一：使用
python中对象的概念_简述Python中的面向对象编程的概念
weixin_39611043的博客
01-29 229
面向对象编程——Object Oriented Programming，简称OOP，是一种程序设计思想。OOP把对象作为程序的基本单元，一个对象包含了数据和操作数据的函数。面向过程的程序设计把计算机程序视为一系列的命令集合，即一组函数的顺序执行。为了简化程序设计，面向过程把函数继续切分为子函数，即把大块函数通过切割成小块函数来降低系统的复杂度。而面向对象的程序设计把计算机程序视为一组对象的集合，而...
python如何面向对象编程_python如何面向对象编程
weixin_30540871的博客
01-12 135
详细内容面向对象编程简单来说就是基于对 类 和 对象 的使用，所有的代码都是通过类和对象来实现的编程就是面向对象编程！面向对象的三大特性：封装、继承、多态首先创建一个类#使用class创建一个School类,类中有个student方法class School:def student(self):passa1=School()一、封装1、封装：将某些内容先封装到一个地方，等到需要的时候再去调用cla...
带你了解原型链
loulansd的博客
12-25 339
了解原型链是什么用来干什么的?
Quix-on-me:让我们看看你对我有多了解？
03-29
原型是JavaScript实现继承的主要机制，每个对象都有一个隐式的[[Prototype]]链，可以通过__proto__属性或Object.getPrototypeOf方法访问。 5. **数组与数组方法** JavaScript中的Array对象提供了丰富的内置方法，...
《AxureRP9网站与App原型设计》教学教案-12项目共享协作及协作利器蓝湖.docx
12-16
《AxureRP9网站与App原型设计》教学教案的第12章主要讲解了如何进行项目共享协作以及如何使用协作工具蓝湖。本章节的教学目标是让学生掌握在AxureRP9中建立、获取和编辑共享工程的方法，并了解并熟练使用蓝湖这一...
原型和原型链
nihaotdb的博客
09-20 804
一、原型： 1.其中，Person是一个构造函数，a是调用Person这个函数的一个实例对象，那什么是原型呢？ 每个函数都有一个prototype属性，而这个属性则会指向调用其的实例对象的原型，也就是说，Person.prototype就是a的原型。 2.函数通过prototype属性指向调用其的实例对象的原型，那么，该实例对象又如何指向他自己的原型呢？ 每个对象也都有一个__proto__属性，该属性指向其原型，也就是： a.__proto__ === Person.prototype...
python面向对象编程
咬树羊的博客
03-14 498
python面向对象
python面向对象的编程_python面向对象的编程
weixin_42525261的博客
02-11 158
创建类和对象面向对象编程是一种编程方式，此编程方式的落地需要使用 “类” 和 “对象” 来实现，所以，面向对象编程其实就是对 “类” 和 “对象” 的使用。类就是一个模板，模板里可以包含多个函数，函数里实现一些功能(手机)对象则是根据模板创建的实例，通过实例对象可以执行类中的函数(华为手机、小米手机)面向对象三大特性面向对象的三大特性是指：封装、继承和多态。一、封装封装，顾名思义就是将内容封装到某...
简单理解原型链
weixin_57167969的博客
08-04 784
简单理解原型链 要了解原型链那么就要先认识几个朋友。 1、原型对象： prototype ① 简单理解：构造函数身上的一个属性 ② 作用：设置公共方法 ③ 构造函数与prototype之间的关系：上图 注意！！！：prototype”作为对象的内部属性，是不能被直接访问的。 2、对象原型：proto ① 简单理解：实例对象身上的属性 ② 指向原型对象prototype ③ 作用：（就是实例对象与原型对象之间的桥梁）实例对象可以访问对象原型身上的公共方法 ④ 上图更好理解： 容易理解断层的地方！！！：pr
从Object和Function说说JS的原型链
weixin_30455365的博客
07-21 104
　　ECMAScript规定了两个特殊的内置对象：Object和Function。他们的特殊性在于，他们本身既是对象又是函数，而他们同时也是对象和函数的构造器。这种自己生自己的逻辑显然违反人性，如果还停留在类的继承的思想上，那么更加无法理解。 　　然而ECMAScript是基于原型链的，所以忘掉类的继承，从原型链入手：原型链是对象的集合，每个对象都有内部属性[[Prototype]]（注1）指向...
Function 的原型链结构（JavaScript）
Manson_Wang的博客
08-29 568
忽略了constructor 1.在JS中任何对象都继承自Object.prototype； 2.在JS中任何函数都继承自Function.prototype； 3.Function.prototype本身又继承自Object.prototype。
JavaScript Function的原型链
houyanhua1的专栏
04-06 294
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //Function也可以被当
JavaScript中Function和Object的原型和原型链
yangyang的专栏
12-05 4086
我们之前写了原型和原型链的文章，但是后面发现比较特殊的一种情况：Function和Object的原型和原型链的关系比较复杂，所以这篇专门来讲两者的关系。 主要参考文章：https://www.jianshu.com/p/dee9f8b14771 1.前言 我们先来讲述几个结论： prototype是函数的一个属性； __proto__是一个对象拥有的内置属性，是JS内部使用寻找原型链的属性； Ob...
js原型和原型链的理解
Feast_aw的博客
09-18 242
// 父类 class People { constructor(name){ this.name = name } eat(){ console.log('测试一下原型链'); } } // 子类 extends继承父类 class Student extends People { constructor(name,number){ // super用来继承父类的属性 super(name) .
MC9S12XS单片机最小系统高效性能解析
资源摘要信息:"MC9S12XS系列是基于HCS12核心...通过以上知识点的阐述，可以全面了解MC9S12XS单片机的基本特性、最小系统的设计、应用领域和开发环境等关键信息。这将有助于读者在相关领域进行更深入的学习和开发工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值