JS-继承模式，命名空间，对象枚举

最新推荐文章于 2024-12-24 21:13:57 发布
最新推荐文章于 2024-12-24 21:13:57 发布
阅读量141 收藏
点赞数
分类专栏： JS学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50945128/article/details/119987443
版权

继承发展史

  1. 传统模式 ----> 原型链
    过多的继承了没用的属性

  2. 借用构造函数
    不能继承借用函数的原型
    每次构造函数都要多走一个函数

  3. 共享原型
    不能随便改动自己的原型

Father.prototype.lastName = 'Deng';
function Father() {

}

function Son() {

}

Son.prototype = Father.prototype;
var son = new Son();
var father = new Father();

                    Father.prototype
        Father                                 Son
  1. 圣杯模式

function inherit(Target,Origin) {
    function F() {};
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.prototype.constuctor = Target;
    Target.prototype.uber = Origin.prototype;
}

var inherit = (function () {
    var F = function () {};
    return function (Target,Origin) {
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constuctor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}());

//两种都可，建议写下面的

Father.prototype.lastName = 'Deng';
function Father() {

}
function Son() {

}

inherit(Son,Father);
var son = new Son();
var father = new Father();

私有化变量

function Deng(name,wife) {
    var prepareWife = 'xiaozhang';

    this.name = name;
    this.wife = wife;
    this.divorce = function () {
        this.wife = prepareWife;
    }
    this.changPrepareWife = function (target) {
        prepareWife = target;
    }
    this.sayPrepareWife = function() {
        console.log(prepareWife);
    }
}
var deng = new Deng ('deng','xiaoliu');

六种继承方式

方式一、原型链继承

  • 子类型的原型为父类型的一个实例对象。
       //父类型
       function Person(name, age) {
           this.name = name,
           this.age = age,
           this.play = [1, 2, 3]
           this.setName = function () { }
       }
       Person.prototype.setAge = function () { }
       //子类型
       function Student(price) {
           this.price = price
           this.setScore = function () { }
       }
       Student.prototype = new Person() // 子类型的原型为父类型的一个实例对象
       var s1 = new Student(15000)
       var s2 = new Student(14000)
       console.log(s1,s2)

子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法

优点

  • 父类新增原型方法/原型属性，子类都能访问到
  • 简单，易于实现

缺点

  • 无法实现多继承 : 如果说父类的私有属性中有引用类型的属性，那它被子类继承的时候会作为公有属性，这样子类1操作这个属性的时候，就会影响到子类2。
  • 要想为子类新增属性和方法，必须要在Student.prototype = new Person()之后执行，不能放到构造器中
  • 来自原型对象的所有属性被所有实例共享

方式二: 借用构造函数继承

在子类型构造函数中通用call()调用父类型构造函数

    function Person (name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.setName = function () {}
    }
	Person.prototype.setAge = function () {}
	
    function Student (name,age,sex,grade) {
        Person.call(this,name,age,sex);
        //Person.apply(this,[name,age,sex]);
        this.grade = grade;
    }
    var student = new Student('aaa',30,'male',6);

这种方式只是实现部分的继承，如果父类的原型还有方法和属性，子类是拿不到这些方法和属性的。

console.log(s1.setAge())
//Uncaught TypeError: s1.setAge is not a function

优点

  • 解决了原型链继承中子类实例共享父类引用属性的问题
  • 创建子类实例时，可以向父类传递参数
  • 可以实现多继承(call多个父类对象)

缺点

  • 只能继承父类的实例属性和方法，不能继承原型属性和方法

方式三: 原型链+借用构造函数的组合继承

通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

        function Person(name, age) {
            this.name = name,
            this.age = age,
            this.setAge = function () { }
        }
        Person.prototype.setAge = function () {
            console.log("111")
        }
        
        function Student(name, age, price) {
            Person.call(this,name,age)
            this.price = price
            this.setScore = function () { }
        }
        
        Student.prototype = new Person()
        Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
        Student.prototype.sayHello = function () { }
        var s1 = new Student('Tom', 20, 15000)
        var s2 = new Student('Jack', 22, 14000)
        console.log(s1)
        console.log(s1.constructor) //Student
        console.log(p1.constructor) //Person

优点

  • 可以继承实例属性/方法，也可以继承原型属性/方法
  • 不存在引用属性共享问题
  • 可传参
  • 函数可复用

缺点

  • 调用了两次父类构造函数，生成了两份实例

方式四: 组合继承优化1

父类原型和子类原型指向同一对象，子类可以继承到父类的公有方法当做自己的公有方法，而且不会初始化两次实例方法/属性，避免的组合继承的缺点。

      function Person(name, age) {
        this.name = name,
            this.age = age,
            this.setAge = function () { }
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    
    function Student(name, age, price) {
        Person.call(this, name, age)
        this.price = price
        this.setScore = function () { }
    }
    
    Student.prototype = Person.prototype
    Student.prototype.sayHello = function () { }
    var s1 = new Student('Tom', 20, 15000)
    console.log(s1)

    // 没办法辨别是对象是子类还是父类实例化
    console.log(s1 instanceof Student, s1 instanceof Person)//true true
    console.log(s1.constructor)//Person

优点

  • 不会初始化两次实例方法/属性，避免的组合继承的缺点

缺点

  • 没办法辨别是实例是子类还是父类创造的，子类和父类的构造函数指向是同一个。

方式五: 组合继承优化2

借助原型可以基于已有的对象来创建对象，var B = Object.create(A)以A对象为原型，生成了B对象。B继承了A的所有属性和方法。

function Person(name, age) {
        this.name = name,
        this.age = age
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    function Student(name, age, price) {
        Person.call(this, name, age)
        this.price = price
        this.setScore = function () {}
    }
    Student.prototype = Object.create(Person.prototype)//核心代码
    Student.prototype.constructor = Student//核心代码
    var s1 = new Student('Tom', 20, 15000)
    console.log(s1 instanceof Student, s1 instanceof Person) // true true
    console.log(s1.constructor) //Student
    console.log(s1)

Student继承了所有的Person原型对象的属性和方法。目前来说，最完美的继承方法！

方式六：ES6中class 的继承

ES6中引入了class关键字，class可以通过extends关键字实现继承

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

// ES6 类继承
    // 父级构造函数
    class Phone{
        // 构造方法
        constructor(brand,price){
            this.brand = brand;
            this.price = price;                
        }

        // 父类的成员属性
        call(){
        	console.log("调用父类的方法")
        }
    } 

    // 子级构造函数
    class SmartPhone extends Phone{
        // 构造方法
        constructor(brand,price,color,size){
            super(brand,price);// super就是父类的constructor  相当于Phone.call(this,brand,price);   // this 指向Smartphone
            this.color = color;
            this.size = size;
        }

        call(){
        	console.log("调用子类的方法")
        }
    }

    // 实例化对象
    const xiaomi = new SmartPhone('小米',2999,'白色','4.7inch');

    console.log(xiaomi);
    xiaomi.call(); // 调用子类的方法
    
        // 子类对父类方法重写
        // 重写：可以在子类里声明一个跟父类同名的方法
        // call(){
        //         console.log('视频通话');
        // }
        // 子类不能直接调用父类同名方法
        // super不能用，报错。在普通的成员方法中不能出现super调用父类同名方法的

        // static   定义静态方法和属性
        
        // ES5
        function Phone(brand,price){
            this.brand = brand;
            this.price = price;
        }
        // 构造函数本身也是一个对象
        Phone.name = '手机';
        Phone.call = function(){
            console.log('我可以打电话');
        }
        Phone.prototype.size = '5.5. sinch';
                                                                                                                                                                  
        let nokia = new Phone();
        console.log(nokia.name);    // undefined  实例对象身上没有构造函数对象身上的属性
        nokia.call();             // Uncaught TypeError: nokia.call is not a function       
        // 实例对象和函数对象的属性不通，实例 对象属性和 构造函数原型 对象属性相通
        // 函数对象的属性属于函数对象，不属于实例对象，这样的属性称为静态成员，该属性属于类，不属于实例对象
        
        console.log(nokia.size);
        

        // ES6
        class Phone{
            // 静态属性
            static name = '手机';
            static call(){
                console.log('我可以打电话'); 
            }
        }

        // 实例化
        let nokia = new Phone();
        console.log(nokia.name);    // undefined
        console.log(Phone.name);    // 手机

        // static 标注的属性和方法，属于类，不属于实例对象

参考文章 ：六种继承方式

命名空间

管理变量，防止污染全局，适用于模块化开发

以前

var org = {
    department1 : {
        jicheng : {
            name : 'abc';
            age : 123;
        },
        xuming : {

        }
    },
    department2 : {
        jicheng : {
            name : 'abc';
            age : 123;
        },
        xuming : {
            
        }
    }
}

var jicheng = org.department1.jicheng;
jicheng.name

防止命名空间

var name = 'bcd';
var init = ( function () {
    var name = 'abc';
    function callName() {
        console.log(name);
    }
    return function() {
        callName();
    }
}())

init();//入口，初始化

如何实现链式调用模式（模仿jquery）

var deng = {
    smoke : function () {
        return this;
    }
    drink : function () {
        return this;
    }
    perm : function () {
        return this;
    }
}
deng.smoke().drink().perm();

属性表示方法
[字符串形式的属性名]
obj.name ----> obj['name']

var deng = {
    wife1 : {name : "xiaoliu"},
    wife2 : {name : "xiaozhang"},
    wife3 : {name : "xiaomeng"},
    wife4 : {name : "xiaowang"},
    sayWife : function (num) {
        return this['wife' + num];
    }
}

遍历：挨个了解每个人的信息

对象枚举

1. for in

  • 每一圈循环将属性名传到prop里，循环圈数为属性个数
var obj = {
    name : 'abc',
    age : 123,
    sex : 'male'
}

for(var prop in obj) {
    console.log(prop + ' ' + typeof(prop));// name string
    console.log(obj[prop]);	// abc
}

2. hasOwnProperty

for in 会打印出原型

obj.hasOwnProperty(‘属性名’) ----> 判断属性是否属于对象的属性方法，返回Bollean值

for(var prop in obj) {
    if(!obj.hasOwnProperty(prop)) {
        console.log(obj[prop]);
    }
}

会打出自己设置的属性方法，系统带的不会打印

3. in

'属性名’ in obj返回布尔值，只能判断对象是否能访问到这个属性，原型上也能用

4. instanceof

A 对象是不是 B 构造函数构造出来的

看A 对象的原型链上 有没有 B 的原型

A instanceof B

判断变量是数组还是对象

  1. a.constructor

a instanceof Array
a instanceof Object
  1. toString
Object.prototype.toString.call([]);
//Object.prototype.toString = function () {
    //识别 this
    //返回相应的结果
//}
JavaScript继承模式+对象枚举+习题（六）
Miracle1203的博客
04-29 2474
解决： 在node1和master节点分别输入 # start-dfs.sh 解决
Js - 严格模式、解构赋值、对象基础
weixin_44175290的博客
03-30 351
严格模式 use strict 解构赋值的各种方法 对象的各种方法
JavaScript继承模式、命名空间
M_DREAMER的博客
05-24 448
继承模式继承的发展史        1、传统形式   （原型链）                     点击了解原型链                 过多的继承了没用的属性                        2、借用构造函数 （call  、 apply）                    点击了解call和apply                不能继承借用构造函数的原型 ...
JavaScript之继承模式，命名空间，对象枚举
u011280778的博客
07-26 217
继承发展史 1-传统形式 → 原型链 过多的继承了没用的属性（很好理解，不用代码演示了） 2-借用构造函数 不能继承借用构造函数的原型（很好理解，不用代码演示了） 每次构造函数都要夺走一个函数（很好理解，不用代码演示了） 3-共享原型 不能随便改动自己的原型 Father.prototype.lastName = 'deng'; function Father() { } func...
JS笔记-7-继承,命名空间,对象枚举
qq_33680352的博客
06-03 79
继承 传统形式 原型链 过多的继承了没用的属性 借用构造函数 不能继承借用构造函数的原型 每次构造函数都要多走一个函数 共享原型 不能随便改动自己的原型 圣杯模式 function F() {} F.prototype = Father.prototype; Son.prototype = New F(); Son.prototype.constuctor = Son; Son.prototype.uber = Father.prototype; // 方法2 var i
继承模式，命名空间，对象枚举
KeKeKe的博客
07-25 131
渡一领跑计划：102-Day11 继承模式，命名空间，对象枚举 1.继承模式 有四种继承方式，分别是 ：(以圣杯模式详细展开) 继承模式 优缺点 原型链 继承了太多不想继承的内容 构造函数 无法继承原型链上的内容 共用原型 修改一个原型会导致另一个原型也发生变化 圣杯模式 相对比较完美的方式 2.命名空间   在企业开发中，一个项目需要很多人来开发，但是在开发过程中会有变量命名相同的情况，因此命名空间诞生！通常有这样用对象的方法来储存变量。 var space = {
js中的继承模式，命名空间，对象枚举
shyyyl的博客
07-13 122
继承模式 传统模式 -->原型链（过多的继承了没用的属性） Grand.prototype.lastName = 'wu' function Grand() {} var grand = new Grand() Father.prototype = grand function Father(){ this.name = 'hehe' } var father = new Father() Son.prototype = father function Son() {} var son = new
6_js继承模式、命名空间、对象枚举
痴心的萝卜的博客
10-29 134
传统形式一>原型链 今过多的继承了没用的属性Grand.prototype.lastName = "Yin"; function Grand () { } var grand = new Grand(); Father.prototype = grand; function Father () { this.name = 'haha'; } var father = new Fat...
前端-JS基础之面向对象
敦煌壁画的博客
02-08 122
Class 用法 class跟let、const一样：不存在变量提升、不能重复声明… es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //es5 functi
04、Vue与Ajax
qq_60060362的博客
12-20 943
(1) 在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。(2) 哪些跨域行为是允许的？① 直接在浏览器地址栏上输入地址进行访问② 超链接③ ④ ⑤ ⑥ ......(3) 哪些跨域行为是不允许的？① AJAX请求是不允许的。
vue3自定义上传功能；手写上传组件；input实现上传
i_am_a_div的博客
12-23 260
vue3自定义上传功能；手写上传组件；input实现上传
JavaScript基础学习
sanguine__的博客
12-20 481
正负号，自增运算符。
12.8&12.9[java exp4][debug]跨域问题原因详解
m0_73553411的博客
12-20 865
Origin = 协议 + 域名 + 端口对于复杂请求，浏览器会首先发送一个 OPTIONS 请求，包含以下头部字段：Origin：指示请求的源。Access-Control-Request-Method：指示实际请求将使用的方法。Access-Control-Request-Headers：指示实际请求将包含的自定义头部。
Vue前端开发-Pinia模块安装与配置
12-24 701
Vue Pinia是一个专门为Vue 3设计的状态管理库，旨在提供一种简单、直观且灵活的方式来处理应用中的全局状态。
Web 应用项目开发全流程解析与实战经验分享
最新发布
m0_74824755的博客
12-24 546
Web 应用项目开发是一个复杂而系统的工程，涉及到需求分析、技术选型、架构设计、开发实现、测试优化以及部署上线等多个环节。每个环节都需要开发者具备扎实的技术功底、丰富的实践经验和良好的团队协作能力。通过本文的介绍，希望能够为广大开发者提供一个全面的 Web 应用项目开发指南，帮助大家在实际项目中少走弯路，提高项目的成功率和质量。同时，Web 应用开发领域仍在不断发展和创新，开发者需要持续学习和探索，以适应不断变化的市场需求和技术挑战。
Vue3：uv-upload图片上传
weixin_63643304的博客
12-22 308
效果图： 代码：
基于SpringBoot的口腔牙诊所系统
计算机学姐的博客
12-20 1063
基于Java+SpringBoot+Vue+MySQL的口腔牙诊所系统
JavaScript概述
Python私教
12-22 481
为了解决JavaScript在大型项目中的类型安全问题，微软开发了TypeScript，这是一种JavaScript的超集，它添加了静态类型系统。TypeScript的出现为JavaScript开发者提供了更多的工具和选择，同时也表明JavaScript社区对于提高开发效率和代码质量的持续追求。在这个阶段，JavaScript的生态系统开始迅速扩展，出现了许多新的框架和库，如jQuery、React、Angular和Vue.js等，它们极大地丰富了JavaScript的应用场景。
JavaScript高级程序设计基础（九)
qq_75246137的博客
12-24 388
startsWith()检查开始于索引 0的匹配项，endsWith()检查开始于索 引(string.length - substring.length)的匹配项，而includes()检查整个字符串。endsWith()方法接收可选的第二个参数，表示应该当作字符串末尾的位置。indexOf()方法 从字符串开头开始查找子字符串，而lastIndexOf()方法从字符串末尾开始查找子字符串。slice()和substring()，第一个参数表示子字符串开始的位置，第二个参数表示子字符串结束的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>