JS面向对象高级特性

简介:

本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:

  1 对象的创建方法

  2 对象的对象属性、私有属性、类属性

  3 对象的对象方法、私有方法、类方法

  4 javascirpt的继承、封装、与多态

  对象的创建方法:

  对象的创建可以通过两种方式,第一种通过对象初始化的方法:

            var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

  第二种方式通过构造函数创建:

            function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

  对象的属性

  对象的属性分为对象属性、私有属性和类属性。

  对象属性需要创建对象后才能使用;

  私有属性在内部可以直接使用,在外部需要通过闭包才能使用。

  类属性可以通过对象名称直接使用。

       function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

 

  对象的方法

  对象方法包括:对象方法,私有方法和类方法,使用类似前面的属性。

            function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

  继承、封装与多态

  JS要想实现继承,需要通过apply方法或者prototype实现。

  如果单纯的使用apply方法,子类的原型是子类;如果使用prototype,那么子类的原型也将继承父类。

  例如下面的代码:

            function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

  上面代码中,cat的原型是cat;

  如果开启注释的部分,可以发现,cat类的原型也变成了Animal。

  子类的方法会覆盖父类的方法,即表现出多态性:

            function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);

  使用到的全部代码:

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            <!-- 对象初始化器方式 -->
            var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

            <!-- 构造函数方式 -->
            function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

            <!-- 对象属性 私有属性,对象属性,类属性 -->
            function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

            <!-- 私有方法,对象方法,类方法 -->
            function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

            <!-- 封装性,继承性,多态性 -->
            <!-- apply()实现属性和方法的集成,prototype实现原型的继承 -->

            function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

            <!-- 继承 -->
            function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);
        </script>
    </body>
</html>

  运行结果:

本文转自博客园xingoo的博客,原文链接:JS面向对象高级特性,如需转载请自行联系原博主。
相关文章
|
5月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
416 15
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
439 155
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
360 11
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1745 4
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
216 5
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
540 4
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
164 9
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性