web(原型链与继承)

最新推荐文章于 2024-03-19 05:07:09 发布
最新推荐文章于 2024-03-19 05:07:09 发布
阅读量277 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pet_ch/article/details/104775055
版权

一、 原型链

  _proto_ ： 原型链，对象的属性，指向生成该对象的构造函数的原型对象
 prototype： 原型对象，函数(构造函数)特有的属性，存储共享的属性和方法

 // 所有的javascript对象都会继承一个prototype原型对象  继承原型对象上的属性和方法
 // Date  对象  从Date.prototype 原型对象上继承属性和方法
 // Array 对象  从Array.prototype  原型对象上继承属性和方法

以js数组对象Array为例：

    var arr = new Array();
    console.log(typeof Array);
    //输出function,即Array本质是一个函数，js中函数也是对象
    
    console.log(arr.__proto__);
     //输出的是Array(arr的上一层，即创建arr的构造函数)的原型对象
     
    console.log(arr.__proto__.__proto__);
    //输出的是Object(即Array的上一层)的原型对象
    
    console.log(arr.__proto__.__proto__.__proto__);
    //输出为null  Object为最高层  没有继承任何对象

原型链与圆形函数的关系，通过下面的例子作以说明

    //定义一个Person 父类
    function Person() {
        this.color = "";
        this.sleep = function () {
        }
    }
    
    //给Person类添加原型对象
    Person.prototype = {
        constructor: Person,
        name: "",
        sex: "",
        eat: function () {
           return "eat";
        }
    }
    
     //定义一个子类Child
     function Child() {
        this.job = "";
    }
  
    // 子类  原型继承 父类
    Child.prototype = new Person();  //先继承，操作子类构造函数的prototype属性
    var c = new Child();             //再实例化子类对象
    
    console.log(c.__proto__);          //输出父类
    console.log(c.__proto__.__proto__);//输出父类的原型对象
    console.log(c.__proto__.__proto__.__proto__);          //输出Object 原型对象
    console.log(c.__proto__.__proto__.__proto__.__proto__);//输出null

 /*下面这种继承没有意义,之前自己在练习过程中上下两种输出一致,对此理解有误,之后发现了问题*/
 /*×××该方法请勿采用×××*/
    var c1=new Child();          //先实例化对象
    c1.__proto__=new Person();   //再继承，操作子类实例化对象的"__proto__"对象
    
    console.log(c1.__proto__);          //输出父类
    console.log(c1.__proto__.__proto__);//输出父类的原型对象
    console.log(c1.__proto__.__proto__.__proto__);         //输出Object 原型对象
    console.log(c1.__proto__.__proto__.__proto__.__proto__);//输出null

    /*两个实例化对象以上的输出一致*/
    
    console.log(Child.prototype == c.__proto__);  //输出true
    /* 第一种实例化：
    *  Child的prototype  通过 Child.prototype = new Person()   设置为了 Person
    *  因此Child实例化后的对象的__proto__也为person
    */
    
     console.log(Child.prototype == c1.__proto__);  //输出false
     /*第二种实例化：
     *先实例化后再继承，只对实例化后的c1对象进行了 c1.__proto__=new Person()的操作  
     *因此，Child的prototype未曾设置，c1的__proto__为person；
     */

总结：
prototype为函数特有的，__proto__是对象的属性
构造方法. prototype== 实例对象.__proto__

二、继承

  1. 原型链继承：将父类的实例化对象赋给子类的原型对象
    //原型链继承

    //定义一个父类
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.eat=function(){
            return this.name+"吃饭";
        }
    }
    //为父类增添原型属性
    Person.prototype.color="黄种人";
    //为父类增添原型属性方法
    Person.prototype.sleep=function(){
        return this.name+"睡觉";
    };
    //定义一个子类
    function Child(sex){
      this.sex=sex;
        this.drink=function(){
            return this.name+"喝水";
        }
    }
    //将父类Person的实例化对象 赋给子类Child的原型对象prototype
    Child.prototype=new Person("张三","20");
    //实例化子类对象
    var child = new Child("男");
    //输出自身、父类、父类原型所有的属性及方法
    console.log(child);

    //判断child对象是否为构造类Child Person的实例化对象
    console.log(child instanceof Child);  //true
    console.log(child instanceof Person);   //true

优点：
1.实例即是子类的实例，也是父类的实例
2.子类本身，父类本身，父类原型，父类原型新增的所有属性方法，子类都可以访问到
缺点:
1.子类实例无法直接向父类构造方法传参；
2.继承之后原型对象上的属性全部是共享的
3.不能多继承 ，即一个子类不能继承多个父类

2.构造继承：通过call apply将父类属性及方法完全复制给子类

//定义父类Person
    function Person(name,sex){
        this.name=name;
        this.sex=sex;
        this.eat=function(){
            return this.name+"吃饭";
        }
    }
    //定义父类 Country
    function Country(con){
        this.con=con;
    }
    //添加父类原型属性
    Country.prototype.fn="父类原型";  //子类不能继承
    //定义子类
    function Child(age,n,s,c){
        this.age=age;
        Person.apply(this,[n,s]);    //继承Person父类
        Country.call(this,c);        //继承Country父类
    }

    var child=new Child(20,"张三","男","China");
    console.log(child);

    console.log(child instanceof  Child);  //true
    console.log(child instanceof Person);  //false
    console.log(child instanceof  Country); //false

优点：
1.可以多继承
2.子类实例可向父类构造函数传参
缺点：
1.构造继承只能call apply
2.子类只能继承 父类的构造属性和方法，不能继承父类原型的属性和方法
3.实例对象只是子类的实例，不是父类的实例

补充：call() 与 apply()方法

每个函数都包含两个非继承而来的方法：call() 与 apply()
两方法作用均为：改变函数体内部 this 的指向

call(thisObj,参数1，参数2，...);
apply(thisObj,[参数1，参数2，...]);

3.实例继承：在子类里直接实例化父类(子类的实例返回 给父类添加的属性和方法)

 function Person(name,sex){
        this.name=name;
        this.sex=sex;
        this.eat=function(){
            return this.name+"吃饭";
        }
    }
    Person.prototype.fn="父类原型";  //子类不能继承

    function Child(n,s){
       var child=new Person(n,s);  //子类内部实例化父类
        return child;
    }

    var child=new Child("张三","男");
    console.log(child);   直接输出实例化后的Person对象

    console.log(child instanceof  Child);  //false
    console.log(child instanceof  Person);  //true

优点：
1.可以传递给父类参数
2.不限制调用的方式
缺点：
1.不能多继承
2.实例是父类的实例，不是子类的实例

4.拷贝继承：将父类对象中的每个属性和方法遍历复制到子类的原型中

 //父类Person
    function Person(name){
        this.name=name;
        this.eat=function(){
            return this.name+"吃饭";
        }
    }

    //父类Country
    function Country(con){
        this.con=con;
    }
    function Child(age,n,c){
        this.age=age;
        var per=new Person(n);
        var per1=new Country(c);
        for(var p in per){
            Child.prototype[p]=per[p];  //将父类实例的属性和方法复制给资料类的原型
        }
        for(var key in per1){
            Child.prototype[key]=per1[key];
        }
    }

    var child=new Child(20,"张三","china");
    console.log(child);
    console.log(child instanceof  Child);  //true
    console.log(child instanceof  Person);  //false
    console.log(child instanceof  Country);  //false

实例是子类的实例，不是父类的实例
优点：
1.可以多继承
2.子类可以向父类传递参数
缺点：
1.效率较低，内存占用高

5.组合继承：原型链继承+构造继承

//父类Person
    function Person(name) {
        this.name = name;
        this.sleep = function () {
            return this.name + "睡觉";
        }
    }

    //父类 Country
    function Country(con){
        this.con=con;
    }
    function Child(sex,n,c){
        this.sex=sex;
        Person.call(this,n);  //可多继承
        Country.call(this,c);
    }

    Child.prototype=new Person();

    //可直接向父类传参，弥补了原型链继承的缺点
    var child = new Child("男","张三","China");
    console.log(child);
    console.log(child instanceof  Child);  //true
    console.log(child instanceof  Person);  //true
    console.log(child instanceof  Country);  
    // 子类没有通过原型链继承Country  false

优点：
1.实例可以直接向父类传参
2.没有原型对象属性的共享
3.可多继承
4.实例是子类的，也是父类的
缺点：
调用了两次父类的构造函数

6.寄生组合继承：将父类的原型给予一个空对象的原型

//父类
    function Person(name) {
        this.name = name;
        this.sleep = function () {
            return this.name + "睡觉";
        }
    }
  //子类
    function Child(n, age) {
        this.age = age;
        this.eat = function () {
            return this.name + "吃饭"
        }
        Person.call(this,n);
    }

    //寄生
    (function(){
        var fn=function(){
        };
        //将父类的原型对象给予空对象
        //避免两次调用父类的构造函数
        fn.prototype=Person.prototype;
        Child.prototype=new fn();
    })();

    var child=new Child("张三",20);
    console.log(child);

    console.log(child instanceof Child); //true
    console.log(child instanceof Person);//true

优点：
处理了组合继承的缺点 ，避免两次调用父类的构造函数
实例是子类的，也是父类的

奢คิดถึง
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端面试准备（四）原型和原型链——JS三座大山之一
boKeB1
03-29 886
这部分有点难度，之前学的时候好像涉及的比较少，以至于除了原型链这三个字一点印象都没有 从题目入手 从题目总结知识点，再解答 题目 如何准确判断一个变量是数组类型(typeof) 写一个原型链继承的例子 描述new一个对象的过程（知道原理） zepto（或其他框架）源码中如何使用原型链（zepto是啥 查一下 可参照https://blog.csdn.net/melody_day/article/...
js代码-JavaScript 原型链与继承
07-14
JavaScript，作为一种广泛应用于Web开发的动态脚本语言，其原型链和继承机制是理解JavaScript对象模型和类式继承的关键概念。在深入探讨之前，我们先简单回顾一下这两个核心概念。 **原型链（Prototype Chain）** ...
web前端 之 原型链
mao871863224的博客
11-07 292
原型链创建对象有几种方法原型、构造函数、实例、原型链instanceof原理new 运算符 创建对象有几种方法 1、字面量 var o1 = {name:'mao'}; var o2 = new Object({name:'mao'}); 2、通过构造函数 var M = function(name) { this.name = name; }; var o3 = new M('o3')...
【Web】Javascript基础之原型链
WHUZXQ的博客
04-20 553
一.prototype 一般函数会预设prototype属性，这个属性是一个对象。function Foo(){ this.y=2 }typeof Foo.prototype;//object Foo.protype.x=1 var obj3=new Foo();//创建一个实例，函数作为构造器使用，this将指向一个对象，对象的原型将指向构造器的prototype属性。obj3.y;//
原型链
weblieele的博客
11-17 91
prototype指向函数的原型对象，这是一个显式原型属性，只有函数才拥有该属性。contructor指向原型对象的构造函数。`在这里插// 可以思考一下的打印结果，它们分别指向谁 // 可以思考一下的打印结果，它们分别指向谁 function Foo() {} console.log(Foo.prototype) console.log(Foo.prototype.contructor) co...
JS之原型和原型链(一)
webar的博客
07-14 277
JS之原型和原型链(一) 1.在JS中万物皆对象，所有对象都具有__proto__属性，由__proto__属性对应的就是该对象的原型； 2. 若对象为函数对象还会具有prototype属性，当函数对象作为构造函数创建实例时，函数的prototype属性的值将被作为实例对象的原型； 这样解释原型有点抽象，下面用例子来详细解释一下 首先创建一个函数对象——Animal function Animal(name){ this.name=name;
js代码-原型链和继承
07-16
有两种常见的继承方式：原型链继承和构造函数继承，以及后来引入的ES6的类继承，但它们都与原型链有关。 1. 原型链继承：这是最基础的继承方式，通过`Object.create()`方法或者设置`__proto__`来实现。例如： ```...
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
10-18
JavaScript是Web开发中不可或缺的一部分，它提供了丰富的特性，如作用域、闭包、对象和原型链，这些都是理解和编写高效代码的关键。以下是对这些概念的详细解释： 1. **JavaScript变量作用域** - **函数作用域**：...
js代码-原型链继承demo
07-16
原型链继承是JavaScript实现面向对象编程的一种方式，它是基于原型（prototype）的概念来实现的。在本示例中，我们将深入探讨JavaScript的原型链继承机制及其相关知识点。 首先，理解原型（Prototype）是关键。在...
原型链的理解
mrfang1413的博客
08-05 330
原型与原型链是JS中一个难点，也是其他语言不具有的特点之一。 1. 原型链作用：利用修改原型链的结构（增删改节点中的成员），使得实例对象可以使用整条原型链中的所有成员。 2. 对象的原型链：凡是对象都有原型；原型也是对象。原型总可以找到下面的原型，构成一个对象的序列，就称该结构为原型链。 3. 原型链结构：凡是使用构造函数创建出来的对象，并且没有利用赋值的方式修改原型，该对象保留默认的原型链...
web前端程序员痛点1——原型链（个人笔记）
m0_56042858的博客
06-15 275
构造函数都会有一个prototype属性，它指向一个对象，我们也把prototype称为原型对象；很多时候，我们通过一个构造函数实例化出来的对象，会有一些相同的方法或属性（比如下图案例中的sing方法）；然而由于这是存在于两个不同对象里的方法，因此会开辟两个内存空间存放功能一模一样的sing方法，这样会浪费内存。属性（这里的对象除了我们理解的狭义对象，也包括了函数、数组等对象）。指向上一级的原型对象prototype，也就是Object()的prototype；属性，指上构造函数的prototype；
javascript原型继承
web_cash的博客
06-05 160
咱们前端的javascript比较任性调皮，类似java，c++之类的继承本质是在原有的class上，并生成一个subclass。JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。如果咱们要原型继承的话可以这样：1、创建一个构造函数作为运输载体；2、将一个构造函数的原型赋予这个运输载体；3、然后将运输载体实例化4、将实例化后的运输载体赋予想要继...
web前端——JS中的继承方式
xishaoguo的博客
05-18 503
ES5 //ES5中的写法一 function Phone(color){ this.color = color; this.show = function(){ console.log("你喜欢看的颜色是:"+this.color); } } function Vivo(color){ Phone.call(this,color); } var vivo = new Viv
web前端开发技术讲解之JS继承方法总结
weixin_34184561的博客
01-24 99
2019独角兽企业重金招聘Python工程师标准>>> ...
Web前端之样式继承与其他概念
花&败
10-22 305
像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在 [1]。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。
Web前端-JS高级继承的方式
yanghainan0318的博客
06-06 133
什么是继承? 人类活动中 继承就是子承父业 在强类型编程语言中 子类继承父类 子类具有父类的功能 但是js是弱类型语言 不存在自定义类型 那么 js中的继承是什么呢? 别的对象有什么功能 我也能拿过来 自己也拥有 就是继承 实现继承的几种方式: 被继承的对象 var obj={ name:"小白白", age:16, ...
JavaScript详解原型和原型链，响应式web开发项目教程
最新发布
m0_61409125的博客
03-19 849
三、constructor// true四、实例与原型、原型的原型实例与原型当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。//删除person name 属性。
彻底弄懂js继承（实现继承的几种方式）
weixin_41658824的博客
10-08 751
//1.通过原型链实现继承（不能使用对象字面量创建原型方法）(很少单独使用) function A(){ this.nameA=“nameA”; } A.prototype.methodA = function(){ return true; }; function B() { this.nameB=“nameB” } B.prototype.methodB = function(){ retur...
nodejs实现原型链污染
09-12
在Node.js中，原型链污染是一种特殊的攻击技术，它利用JavaScript的原型继承机制来修改对象的原型链并注入恶意代码。通过修改对象的原型链，攻击者可以影响对象的行为并执行恶意操作。 实现原型链污染的过程如下： 1. 攻击者首先要找到一个合适的目标对象，该对象通常是在代码中被使用的，并且具有对外部输入进行处理的功能。 2. 攻击者通过修改目标对象的原型链，向其原型对象中添加恶意代码或属性。这通常是通过修改被攻击对象的__proto__属性来实现的。 3. 当目标对象在后续的代码中被使用时，恶意代码或属性将会被执行或访问。 例如，在Node.js中，如果一个Web应用程序使用了一个处理JSON数据的库，并且对外部的JSON数据没有进行充分的验证和过滤，那么攻击者可以通过构造恶意的JSON数据来实现原型链污染。攻击者可以将恶意代码添加到JSON数据中的__proto__属性，当应用程序解析并使用该JSON数据时，恶意代码将被执行。 总结起来，Node.js的原型链污染是一种利用JavaScript的原型继承机制来修改对象的原型链并注入恶意代码的攻击技术。攻击者可以通过修改目标对象的__proto__属性来实现原型链污染，并在后续的代码中执行恶意操作。因此，在开发过程中，需要注意对外部输入的验证和过滤，以防止原型链污染攻击的发生。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值