23-JS高级：原型链、constructor构造函数、继承

最新推荐文章于 2024-07-13 17:43:47 发布
最新推荐文章于 2024-07-13 17:43:47 发布
阅读量96 收藏
点赞数
分类专栏： 前端学习 文章标签： es6 javascript html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51339105/article/details/124484502
版权

1.原型链

每一个实例对象有__proto__属性，指向的是构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性,这样一层一层往上找就形成了原型链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
    

    // 在构造函数中，定义属性和方法  只要实例化一个对象，就会重新创建方法sing 就会开辟内存空间
    // 浪费内存

    // 我们要多个对象共用一个方法  把方法定义到原型对象中




    function Star(name,age){
        this.name = name;
        this.age = age;
    }

    // 原型对象
    Star.prototype.sing = function(){
        console.log('唱歌把');
    }

    // 1.实例化对象  只要是对象就有__proto__   指向原型对象
    var s1 = new Star('张三',12);
    s1.sing()

    console.log(Star.prototype);
    // new Object
    // 2.我们Star原型对象的__proto__指向的是Object.prototype
    console.log(Star.prototype.__proto__ === Object.prototype)  //true
    // 3.我们Object.prototype原型对象的__proto__指向null
    console.log(Object.prototype.__proto__);  //null
    </script>
</body>
</html>

2.constructor构造函数

对象原型 proto 和构造函数prototype 原型对象里都有一个属性 constructor
constructor 我们称为构造函数，因为他指回构造函数本身
constructor 主要用来记录对象引用于那个构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
    



    function Star(name,age){
        this.name = name;
        this.age = age;
    }


    // 我们修改了原来的原型对象 给原型对象赋值的是一个对象
    // 我们手动的给constructor 指回原来的构造函数
    Star.prototype = {
        constructor:Star,  //手动设置指向原来的构造函数
        sing:function(){
            console.log('唱歌')
        },
        movie:function(){
            console.log('看电影')
        }
    }

    var s = new Star('李四',23);
    console.log(s);
    </script>
</body>
</html>

3.原型对象中this的指向

构造函数中的this和原型对象中的this 都指向我们new出来的实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

    function Star(name,age){
        this.name = name;
        this.age = age;
    }

    Star.prototype.sing = function(){
        console.log('唱歌把')
    }

    Star.prototype.sex = '女';

    var s = new Star('小写',34);
    console.log(s.sex);  //女
    console.log(Object.prototype);
    console.log(s);
    console.log(Star.prototype);
    console.log(s.toString());



    /* 
    当访问一个对象的属性或方法时，首先先查找这个对象自身有没有该属性
    如果没有就找它的原型（也就是__prot__指向的prototype原型对象）
    如果还没有找到就查找原型对象的原型（Object的原型对象）
    类推 一直找到Object为止  null
    */


    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

        /* 
        构造函数中的this和原型对象中的this都指向我们new出来的实例对象
        */

        function Star(name,age){
        this.name = name;
        this.age = age;
    }

    var that;
    Star.prototype.sing = function(){
        console.log('我会唱歌');
        that = this;
    }

    var s = new Star('小妞' ,23);
    s.sing();
    console.log(that === s);   //true
    </script>
</body>
</html>

4.继承

call

call() 可以调用函数

call()可以修改this的指向，使用call()的时候，参数1是修改后的this指向，参数2，参数3 使用逗号隔开

构造函数继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

    //  function fn(x,y){
    //      console.log('我想吃');
    //      console.log(this);
    //      console.log(x + y);
    //  }

    //  var o = {
    //      name:'zx'
    //  }

    //  fn(12,34);

    /* 
    call()可以调用函数

    call()可以修改this指向，使用call()的时候，参数1是修改后的this指向，参数2，参数3 使用逗号隔开
    
    */

    // fn.call(o,23,56);


    //  构造函数继承
    // 只能继承父类的实例属性和方法  不能继承原型属性或者方法


    // 父构造函数
    function Parentl(){
        this.name = 'parentl'
    }


    Parentl.prototype.getName = function(){
        return this.name
    }


    // 子构造函数
    function Child(){
        // this指向子构造函数的对象实例
        Parentl.call(this);  //c
        this.type = 'child';
    }

    var c = new Child();
    console.log(c);
    console.log(c.getName())  //报错

    // 父类原型对象中一旦存在父类之前自己定义的方法，那么子类将无法继承这些方法
    </script>
</body>
</html>

借用原型对象继承方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

    //  1.父构造函数
    function Parentl(name,age){
        // this指向父构造函数的实例
        this.name = name;
        this.age = age;
    }


    Parentl.prototype.money = function(){
        console.log(1000000);
    }


    // 子构造函数
    function Child(name,age,score){
        // this指向子构造函数的对象实例
        Parentl.call(this,name,age);  //c
        this.score = score;
    }

    Child.prototype = new Parentl();
    // 利用对象的形式修改了原型对象，手动设置constructor
    Child.prototype.constructor = Child

    Child.prototype.ks = function(){
        console.log('考试')
    }

    var c = new Child('zs',20,98);
    console.log(c);
    console.log(c.money)
    console.log()

    </script>
</body>
</html>

5.数组新增方法

通过原型为数组扩展内置方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>

        /* 
        数组.push
        数组.splice
        数组.shift
        ---------
        都是定义在
        Array.prototype原型对象上
        */

        // var arr = new Array()
        // console.log(arr)



        // 为数组扩展内置的方法
        Array.prototype.sum = function(){
            // this 指向的是arr
            var sum = 0;
            for(var i =0; i < this.length; i++){
                sum += this[i]
            }
            return sum
        }

        var arr = new Array()
        arr.push(23,45,1,2,4,5,7)
        console.log(arr)
        console.log(arr.sum());


    </script>
</body>
</html>

forEach遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        var arr = [12,4,5,6,78,5,4,32,46,8,9];

        // arr.forEach(function(value,index,array){
        //     // value数组每一个元素
        //     // index数组元素的索引
        //     // array 当前的数组
        //     console.log(value,index,array);
        // })

        // // forEach 数组遍历  相当于for循环
        // arr.forEach((item,index,arr)=>{
        //     console.log(item,index,arr)
        // })



        // ----------------------------
        // filter过滤数组  返回过滤后的新数组

       var newarr = arr.filter(function(value,index,array){
            return value >=10
        })
        console.log(newarr)  //[12, 78, 32, 46]

        // some  every  findIndex  map
    </script>
</body>
</html>
weixin_51339105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
构造函数-原型-对象原型-constructor属性-原型继承-原型链
xiaohu_haha的博客
05-21 478
1、构造函数 面对对象编程的特性：比如封装性、继承性等，可以借助于构造函数来实现，但是会存在浪费内存的问题 <script> // 构造函数函数名一般习惯以大写字母开头 // this指向的实例对象 function Person(x, y) { this.uname = x, this.age = y, this.sing = function() { console.log('我会唱歌');
JavaScript 原型继承之构造函数继承
10-28
JavaScript中的构造函数继承是基于原型继承的一种实现方式，它允许一个构造函数（子类）从另一个构造函数（父类）那里继承属性和方法。在JavaScript中，每个对象都有一个[[Prototype]]内部属性，通常通过`__proto__`...
【JS】理解原型 constructor 原型链
TimCope的博客
05-05 554
[什么是原型] 原型是函数对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，同时原型也是一个对象。 [constructor] 补充我在构造函数内没有的讲的，我们知道person1 和 person2 都是Person构造函数构造出来的实例，同时我们提出来了一个新的概念constructor 是构造的意思，在学完es6之后我发现这个...
js原型、constructor、继承总结
a8845的博客
04-08 3341
原型：函数创建时会自动內建一个prototype属性，这个属性是一个object，所以也称该属性称为原型对象。 代码： function Fun(){ this.name = 'sven'; this.getName = function(){ alert( this.name ); } } console.dir( Fun );
js的三种继承方式及其优缺点
热门推荐
web前端wyy的专栏
06-03 1万+
第一种，prototype的方式：//父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + '
JS 原型对象的constructor属性
liubangbo的专栏
01-22 1399
function Person() { this.color = "yellow"; this.showColor = function () { return this.color; } } var person1 = new Person(); console.log("Person.prototype.constructor: " ...
JS继承：原型继承、构造函数继承、组合继承与最佳的继承
X1432564581的博客
07-07 901
最近对JS继承中的几种方式复习了下，在这里总结一下： 首先我们先定义一下父类的构造函数 function Person(name) { this.name = name; } 然后我们在父类的原型上添加一个printName函数 Person.prototype.printName = function () { return "I am a person"; }; 下面开始我们的表演： 一、原型继承 原型继承，顾名思义就是通过原型链来让子类继承父类的属性以及函数，代码如下： function
JS 继承-（一）原型链继承、构造函数继承、组合继承
weixin_46235143的博客
01-18 436
前言 都说了 JS 是面向对象的语言啦，单线程。 拥抱面向对象 继承、封装、多态 原型链继承 核心：一个子类函数的 prototype 指向父类函数的实例child.prototype = new parent() function foo1() { this.name = '小明'; } function foo3() { this.size = 'max' } foo3.prototype = new foo1(); //1.原型链继承
面试向：原型、原型链、构造函数、继承、实例对象
接着奏乐接着舞的博客
08-06 1140
介绍了原型、原型链、构造函数、继承、new的实例化过程
js继承的超详细讲解：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
博哥的二进制世界
05-29 332
js继承的超详细讲解前言原型链继承原型链继承的定义以及简单示例 前言 作为对象三大特性（继承、封装、多态）之一的继承，到底是什么呢？简而言之，继承就是可以使得子类具有父类的各种方法和属性。 接下来我们就详细描述一下前端的js继承。 原型链继承 原型链继承的定义以及简单示例 先说说什么是原型链继承。通过prototype实现继承的即为原型链继承 比如说想让子类Child构造函数继承父类Person构造函数的属性和方法 先让Child.prototype = new Person(),简而言之：让新实例的pro
js代码-组合继承(原型链继承+构造函数继承)
07-14
在JavaScript中，组合继承是一种常见的继承模式，它结合了原型链继承和构造函数继承的优点，以实现更灵活的对象创建和复用。这种模式是通过在子类构造函数中调用父类构造函数来继承属性，然后通过原型链来继承方法。...
JavaScript中构造函数与原型链之间的关系详解
01-21
在Javascript中不存在class的概念，它的class概念是通过构造函数（constructor）与原型链（prototype）来实现。 1.构造函数（constructor）：创建对象时的初始化对象，总是与new 关键是一同出现。 构造函数存在以下...
搞定ES6同步与异步机制、async/await的使用以及Promise的使用！
最新发布
qq_65034569的博客
07-13 395
搞定ES6同步与异步机制、async/await的使用以及Promise的使用！！！
js ES6 part2
E___V___E的博客
07-10 893
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数主要使用场景：1. forEach 主要是遍历数组2. 参数当前数组元素是必须要写的，索引号可选。和map不一样，map有返回值，可以用来处理数组，然后返回新数组，forEach是加强版for循环，可以遍历数组对象，对里面的数据进行处理，不如插入到哪个dom元素等163筛选商品案例。
谷粒商城实战笔记-29~34-前端基础 - ES6
epitomizelu的专栏
07-12 1024
通常被称为ES6，是JavaScript的一种规范，于2015年发布，因此有时也被称为ES2015。它是JavaScript语言的一次重大升级，引入了一系列新特性和语法糖，旨在提高语言的性能、可读性和功能丰富度。ES6 的目标之一是让JavaScript更接近其他成熟的编程语言，同时也保持其原有的灵活性和动态性。
ES6 Generator函数的语法 （七）
qq_35876316的博客
07-10 422
ES6 中的 Generator函数是一种特殊类型的函数，它允许你控制函数的执行流程，使其在执行过程中可以多次暂停和恢复。Generator 函数在定义时使用星号 *作为后缀。
ES5/ES6补充笔记
喵喵的博客
07-09 956
ES5/ES6补充 ECMAScript 5 2009年12月 正式发布 ECMAScript 5.1就是我们常说的es5 2012年发布 ECMAScript 6（简称ES6）是于2015年6月正式发布的javascript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 声明命令 let const let声明符 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变
ES6 Class 的继承（十一）
qq_35876316的博客
07-12 422
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
原型链继承2.借用构造函数继承3.组合式继承4.ES6的class类继承
06-07
原型链继承（Prototype Inheritance）在JavaScript中是通过创建一个新对象并让它引用另一个对象的原型来实现的。例如： ```javascript function Parent() {} Parent.prototype.method = function() { console.log('Parent method'); }; let child = new Parent(); child.method(); // 输出: "Parent method" ``` **借用构造函数继承**（Constructo r Chaining）利用已有构造函数作为父类，通过`new`关键字传递给子类实例化过程，间接实现了继承： ```javascript function Parent() { this.parentProp = 'parent'; } function Child() { Parent.call(this); // 借用父类构造函数 this.childProp = 'child'; } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; let childInstance = new Child(); console.log(childInstance.parentProp); // 输出: "parent" console.log(childInstance.childProp); // 输出: "child" ``` **组合式继承**（Mix-in or Prototype Mixing）结合原型链和构造函数继承，允许从多个源继承属性和方法： ```javascript function Mixin(target) { for (let prop in Mixin.prototype) { target[prop] = Mixin.prototype[prop]; } } function Parent() { this.parentProp = 'parent'; } Mixin(Parent.prototype); let child = new Parent(); console.log(child.parentProp); // 输出: "parent" ``` **ES6的class类继承**（Class-based Inheritance）使用`extends`关键字实现： ```javascript class Parent { constructor() { this.parentProp = 'parent'; } parentMethod() { console.log('Parent method'); } } class Child extends Parent { constructor() { super(); this.childProp = 'child'; } childMethod() { console.log('Child method'); } } let childInstance = new Child(); childInstance.parentMethod(); // 输出: "Parent method" childInstance.childMethod(); // 输出: "Child method" ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值