构造函数、js原型、原型链、继承

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量119 收藏
点赞数
分类专栏： js 文章标签： javascript 原型模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingdi1/article/details/127209251
版权

构造函数、js原型、原型链、继承

构造函数

构造函数分为 实例成员 和 静态成员

实例成员： 实例成员就是在构造函数内部，通过this添加的成员。实例成员只能通过实例化的对象来访问。
静态成员： 在构造函数本身上添加的成员，只能通过构造函数来访问

    function Star(name,age) {
        //实例成员
        this.name = name;
        this.age = age;
    }
    //静态成员
    Star.sex = '女';

    let stars = new Star('小红',18);
    console.log(stars);      // Star {name: "小红", age: 18}
    console.log(stars.sex);  // undefined     实例无法访问sex属性

    console.log(Star.name); //Star     通过构造函数无法直接访问实例成员
    console.log(Star.sex);  //女       通过构造函数可直接访问静态成员
通过构造函数创建对象

通过构造函数创建一个对象

 function Father(name) {
     this.name = name;
 }
 let son = new Father('Lisa');
 console.log(son); //Father {name: "Lisa"}

new的过程

(1) 创建一个空对象 son {}
(2) 为 son 准备原型链连接 son.__proto__ = Father.prototype
(3) 重新绑定this，使构造函数的this指向新对象 Father.call(this)
(4) 为新对象属性赋值 son.name
(5) 返回this，此时的新对象就拥有了构造函数的方法和属性了
在构造函数上直接定义方法（不共享）
    function Star() {
        this.sing = function () {
            console.log('我爱唱歌');
        }
    }
    let stu1 = new Star();
    let stu2 = new Star();
    stu1.sing();//我爱唱歌
    stu2.sing();//我爱唱歌
    console.log(stu1.sing === stu2.sing);//false

在构造函数上通过this来添加方法的方式来生成实例，每次生成实例，都是新开辟一个内存空间存方法。

通过原型添加方法（共享）
    function Star(name) {
        this.name = name;
    }
    Star.prototype.sing = function () {
        console.log('我爱唱歌', this.name);
    };
    let stu1 = new Star('小红');
    let stu2 = new Star('小蓝');
    stu1.sing();//我爱唱歌 小红
    stu2.sing();//我爱唱歌 小蓝
    console.log(stu1.sing === stu2.sing);//true

构造函数通过原型添加的函数，是所有对象共享的。

定义构造函数

公共属性定义到构造函数里面，公共方法我们放到原型对象身上。

原型、原型链

 function Star(name) {
        this.name = name;
    }
console.log(Star.prototype)//{constructor: ƒ Star(name)}
console.log(Star.prototype.constructor === Star);//true

Star.prototype 就是原型。原型的作用，就是共享方法。

原型与原型层层相链接的过程即为原型链。对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在

function Star(name,age) {
    this.name = name;
    this.age = age;
}
Star.prototype.dance = function(){
    console.log('我在跳舞',this.name);
};
let obj = new Star('张萌',18);
console.log(obj.__proto__);  //{dance: ƒ, constructor: ƒ}
console.log(obj.__proto__ === Star.prototype);//true
console.log(obj.__proto__.constructor);  // Star
console.log(obj.__proto__.constructor === Star); //true
原型链图
prototype
实例化
__prote__
constuctor
构造函数Function
Funtion的原型对象
实例对象Object
原型查找顺序

(1)首先看obj对象身上是否有dance方法，如果有，则执行对象身上的方法。

(2)如果没有dance方法，就去构造函数原型对象prototype身上去查找dance这个方法。

(3)如果再没有dance方法，就去Object原型对象prototype身上去查找dance这个方法。

(4)如果再没有，则会报错。

    function Star(name) {
        this.name = name;

        (1)首先看obj对象身上是否有dance方法，如果有，则执行对象身上的方法
        this.dance = function () {
            console.log(this.name + '1');
        }
    }

    (2)如果没有dance方法，就去构造函数原型对象prototype身上去查找dance这个方法。
    Star.prototype.dance = function () {
        console.log(this.name + '2');
    };

    (3)如果再没有dance方法，就去Object原型对象prototype身上去查找dance这个方法。
    Object.prototype.dance = function () {
        console.log(this.name + '3');
    };
    (4)如果再没有，则会报错。
    let obj = new Star('小红');
    obj.dance();

继承

ES5

利用call改变this指向，只可以继承属性，实例不可以使用父类的方法。

    function Father(name) {
        this.name = name;
    }
    Father.prototype.dance = function () {
      console.log('I am dancing');
    };
    function Son(name, age) {
        Father.call(this, name);
        this.age = age;
    }
    let son = new Son('小红', 100);
    console.log(Father.prototype) //{dance: ƒ, constructor: ƒ}
    // 利用call改变this指向，只可以继承属性，实例不可以使用父类的方法。
    console.log(son.__proto__) //{constructor: ƒ}
    son.dance();   //报错  son.dance is not a function

Son.prototype = Father.prototype改变原型指向，我们给子类增加原型方法，同样会影响到父类

    function Father(name) {
        this.name = name;
    }
    Father.prototype.dance = function () {
        console.log('I am dancing');
    };
    function Son(name, age) {
        Father.call(this, name);
        this.age = age;
    }
    console.log(Son.prototype)//{constructor: ƒ}
    console.log(Father.prototype)//{dance: ƒ, constructor: ƒ}
    Son.prototype = Father.prototype;
    console.log(Son.prototype)//{dance: ƒ, constructor: ƒ}
    //为子类添加方法
    Son.prototype.sing = function () {
        console.log('I am singing');
    };
    let son = new Son('小红', 100);
    //此时父类也被影响了
    console.log(Father.prototype === Son.prototype) // true
    console.log(Father.prototype) //{dance: ƒ, sing: ƒ, constructor: ƒ}

子类的原型指向父类的实例，共享父类的方法了。为子类添加原型方法的时候，就不会影响父类。

    function Father(name) {
        this.name = name;
    }
    Father.prototype.dance = function () {
        console.log('I am dancing');
    };
    function Son(name, age) {
        Father.call(this, name);
        this.age = age;
    }
    Son.prototype = new Father();
    console.log(new Father().__proto__)//{dance: ƒ, constructor: ƒ}
    console.log(Son.prototype.__proto__)//{dance: ƒ, constructor: ƒ}
    console.log(Son.prototype.__proto__ === Father.prototype)//true
    Son.prototype.sing = function () {
        console.log('I am singing');
    };
    let son = new Son('小红', 100);
    console.log(son.__proto__.__proto__) //{dance: ƒ, constructor: ƒ}
    console.log(Father.prototype) //{dance: ƒ, constructor: ƒ}

如有疑惑，请查看原型查找顺序

prototype
实例化
prototype
__proto__
Son构造函数
Son的原型对象
Father实例对象
Father构造函数
Father原型对象
类

类的本质还是一个函数，类就是构造函数的另一种写法。

function Star(){}
console.log(typeof Star); //function

class Star {}
console.log(typeof Star); //function

类的所有方法都定义在类的prototype属性上面

    class Father{
        constructor(name){
            this.name = name;
        }
        sing(){
            return this.name;
        }
    }
    let red = new Father('小红');
    let green = new Father('小绿');
    console.log(red.sing === green.sing); //true

    class Father{
        constructor(name){
            this.name = name;
        }
        sing(){
            return this.name;
        }
    }
    //在原型上追加方法
    Object.assign(Father.prototype,{
        dance(){
            return '我爱跳舞';
        }
    });
    let red = new Father('小红');
    let green = new Father('小绿');
    console.log(red.dance());//我爱跳舞
    console.log(red.dance === green.dance); //true

一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

ES6
    class Father {
        constructor(name){
            this.name = name;
        }
        dance(){
            return '我在跳舞';
        }
    }
    class Son extends Father{
        constructor(name,score){
            super(name);
            this.score = score;
        }
        sing(){
            return this.name +','+this.dance();
        }
    }
    console.log(Son.prototype)//Father {constructor: ƒ, sing: ƒ}
    console.log(Son.prototype.__proto__)//{constructor: ƒ, dance: ƒ}
    let obj = new Son('小红',100);//'小红,我在跳舞'

构造函数特点：

1.构造函数有原型对象prototype。

2.构造函数原型对象prototype里面有constructor，指向构造函数本身。

3.构造函数可以通过原型对象添加方法。

4.构造函数创建的实例对象有__proto__原型，指向构造函数的原型对象。

类：

1.class本质还是function

2.类的所有方法都定义在类的prototype属性上

3.类创建的实例，里面也有__proto__指向类的prototype原型对象

4.新的class写法，只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

5.ES6的类其实就是语法糖。

prototype
__proto__
__proto__
Object
Object.prototype
null
Function.prototype
prototype
__proto__
Function
Function.prototype
Object.prototype
new
prototype
__proto__
constructor
Father函数
son
Father.prototype
Los rain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js函数继承-原型链详解
weixin_53027472的博客
08-22 293
函数继承和原型链详解，js底层重点内容
构造函数和原型
Lotus_fragrance的博客
06-13 490
目录1. 构造函数和原型1.1 概述1.2 构造函数1.3 构造函数的问题1.4 构造函数原型 prototype1.5 对象原型 __proto__1.6 constructor 构造函数1.7 构造函数、实例、原型对象三者之间的关系1.8 原型链1.9 JavaScript 的成员查找机制(规则)1.10 原型对象this指向1.11 扩展内置对象2. 继承2.1 call()2.2 借用构造函数继承父类型属性2.3 借用原型对象继承父类型方法3. ES5 中的新增方法3.1 ES5 新增方法概述3.2
构造函数的属性和方法
a791226606的博客
06-20 1327
一、构造函数内定义的属性/方法 function Fn(name){ this.name=name; }; var a = new Fn('张三'); var b = new Fn('李四'); console.log(a.name)//张三 console.log(b.name)//李四 可以看出：构造函数内定义的属性/方法，对实例来说是不共享的，每一个实例都有各自的一份。互不影响！！ 二、被继承的原型对象中属性/方法 function Fn(name){ this.name=name; };
JS 的构造函数、原型和原型链
impact_factor的博客
08-20 310
构造函数、原型和原型链构造函数构造函数简介静态成员和实例成员构造函数和类的区别构造函数的问题原型构造函数原型 prototype__proto__对象原型constructor 构造函数构造函数、实例、原型对象三者之间的关系原型链 构造函数 构造函数简介 在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个
JS中的构造函数，原型，原型链，原型链继承
Zhou的博客
04-16 550
JavaScript是一门基于原型的解释型脚本语言，运行在浏览器端，同时JS也是面向对象的编程语言，在JS中所有的事物都可以看作是对象，字符串，数字，函数等等。 首先复习一下创建对象的方式有哪些？ 1.通过对象字面量来创建：var student = { key:value,...} 2.通过new Object()创建对象： var student = new Object(); stude...
JS 继承-（一）原型链继承、构造函数继承、组合继承
weixin_46235143的博客
01-18 438
前言 都说了 JS 是面向对象的语言啦，单线程。 拥抱面向对象 继承、封装、多态 原型链继承 核心：一个子类函数的 prototype 指向父类函数的实例child.prototype = new parent() function foo1() { this.name = '小明'; } function foo3() { this.size = 'max' } foo3.prototype = new foo1(); //1.原型链继承
原型链继承和构造函数继承
m0_69983788的博客
10-10 222
原型链继承和构造函数继承
JS构造函数和原型
qq_45359288的博客
03-31 925
1. 构造函数和原型 1.1 概述 在典型的OOP语言中，例如java，都存在类的概念。 类就是对象的模板，对象就是类的实例，但是在ES6之前，JS没有引入类的概念。 ES6 全称ECMAScript 6.0，2015.06发版。在ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。 创建对象可以通过以下三种方式： 对象字面量 //var obj1 = { } new Object() //var obj2 = new Object() 自定义构造函数 1.2 构
js原型链继承与构造函数继承的优缺点及解决方案
weixin_42989966的博客
12-14 2519
js原型与原型链继承的理解 1. 原型链的概念 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样...
javascript构造函数及原型链梳理
to_the_Future的博客
07-06 240
构造函数和原型链是 JavaScript 中的重要概念，它们可以用于创建对象和实现继承功能。掌握构造函数和原型链的基本概念和用法，有助于提高 JavaScript 编程技能。下次再见。
JavaScript 原型继承之构造函数继承
10-28
JavaScript中的构造函数继承是基于原型继承的一种实现方式，它允许一个构造函数（子类）从另一个构造函数（父类）那里继承属性和方法。在JavaScript中，每个对象都有一个[[Prototype]]内部属性，通常通过`__proto__`...
JavaScript中构造函数与原型链之间的关系详解
10-17
总结来说，构造函数和原型链在JavaScript中扮演着至关重要的角色，它们一起构建了一个对象的继承结构。通过理解这两个概念，开发者可以更好地掌握JavaScript的面向对象特性，实现更复杂的代码设计和复用。
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
12-07
构造函数、原型实现继承的缺陷 ...这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法。用这两种方式重写前面的例子，代码如下： 代码如下:function ClassA(sColo
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
01-19
　既然你想了解继承，证明你对JavaScript面向对象已经有一定的了解，如还有什么不理解的可以参考《面向对象JS基础讲解，工厂模式、构造函数模式、原型模式、混合模式、动态原型模式》，接下来讲一般通过那些方法完成...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1188
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 172
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 212
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 253
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 615
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
构造函数的原型和原型链
03-28
构造函数的原型是一个对象，它包含了构造函数的所有公共属性和方法。每个实例对象都可以访问这个原型...构造函数的原型和原型链是 JavaScript 面向对象编程中非常重要的概念，它们可以帮助我们实现代码的复用和继承。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值