创建对象的方式：

1）单体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>面向对象——单体</title>

    <script type="text/javascript">

        var Tom = {

            name: 'tom',

            age:18,

            showname:function(){

                alert(this.name);

            },

            showage:function(){

                alert(this.age);

            }

        };

        alert(Tom.age);

        Tom.showname();

    </script>

</head>

<body>

</body>

</html>

2）工厂模式：通过一个函数来创建对象（开料、装配、出厂）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>工厂模式</title>

    <script type="text/javascript">

        function Person(name,age,job){

            var o = new Object();

            o.name = name;

            o.age = age;

            o.job = job;

            o.showname = function () {

                alert(this.name);

            };

            o.showage = function () {

                alert(this.age);

            };

            return o;

        }

        var Tom = Person('tom',18,'engineer');

        Tom.showname();

        Tom.showage()

    </script>

</head>

<body>

</body>

</html>

3）构造函数（方法重复，缺点是占用内存）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>构造函数</title>

    <script type="text/javascript">

        function Person(name,age,job){

            this.name = name;

            this.age = age;

            this.job = job;

            this.showname = function () {

                alert(this.name);

            }

        }

        var Tom = new Person('tom',18,'engineer');

        Tom.showname()

    </script>

</head>

<body>

</body>

</html>

4）原型模式（创建类）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>原型模式</title>

    <script type="text/javascript">

        function Person(name,age,job) {

            this.name = name;

            this.job = job;

            this.age = age;

        }

        //在prototype上绑定方法，该方法可以实现不同实例的共用

        Person.prototype.showname = function () {

            alert(this.name);

        };

        var Tom = new Person('tom',18,'engineer');

        var Jack = new Person('jack',19,'worker');

        Tom.showname();

        Jack.showname();

    </script>

</head>

<body>

</body>

</html>

继承：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>继承</title>

    <script type="text/javascript">

        function Fclass(name,age) {

            this.name =name;

            this.age = age;

        }

        Fclass.prototype.showname = function () {

            alert(this.name);

        };

        Fclass.prototype.showage = function () {

            alert(this.age);

        };

        //属性继承：用call或者apply的方法继承

        function Sclass(name,age,job) {

            //改变当前函数执行的this对象:指向了子类实例化的对象

            // call:aa.call('abc',2,3)

            //apply:aa.apply('abc',[2,3])

            Fclass.call(this,name,age);

            this.job = job;

        }

        //方法继承：将父类的一个实例赋值给子类的原型属性

        Sclass.prototype = new Fclass();

        Sclass.prototype.showjob = function(){

            alert(this.job);

        };

        var Tom = new Sclass('tom',18,'engineer');

        Tom.showage();

        Tom.showname();

        Tom.showjob();

    </script>

</head>

<body>

</body>

</html>

JS——面向对象、继承的更多相关文章

  1. js面向对象继承

    前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...

  2. js面向对象 继承

    1.类的声明 2.生成实例 3.如何实现继承 4.继承的几种方式 1.类的声明有哪些方式 <script type="text/javascript"> //类的声明 ...

  3. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  4. js 面向对象 继承

    继承方式有四种: 1.call 2.apply 3.prototype 4.for in call 和 apply 的主要区别: call 传参数只能一个一个的传, apply 因为是用数组,所以可以 ...

  5. JS 面向对象 ~ 继承的7种方式

    前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...

  6. js 面向对象 继承机制

    根据w3cschool上的描述:共有3种继承方法(对象冒充,原型链,混合) 1.对象冒充:构造函数ClassA使用this关键字给所有属性和方法赋值,使ClassA构造函数成为ClassB的方法,调用 ...

  7. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  9. js面向对象之继承那点事儿根本就不是事

    继承 说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且 ...

  10. 捋一捋js面向对象的继承问题

    说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...

随机推荐

  1. 为啥要去IOE——分布式架构的由来

    1946年2.14日,那是一个浪漫的情人节 , 世界上第一台电子数字计算机在美国宾夕法尼亚大学诞生了,她的名字叫ENIAC.这台计算机占地170平米.重达 30 吨,每秒可以进行 5000 次加法运算 ...

  2. Poj 1659 Distance on Chessboard(国际象棋的走子规则)

    一.Description 国际象棋的棋盘是黑白相间的8 * 8的方格,棋子放在格子中间.如下图所示: 王.后.车.象的走子规则如下: 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走 ...

  3. 人物-IT-马云：马云

    ylbtech-人物-IT-马云:马云 马云 (阿里巴巴集团创始人) 马云,男,汉族,中共党员,1964年9月10日生于浙江省杭州市,祖籍浙江省嵊州市谷来镇, 阿里巴巴集团主要创始人,现担任阿里巴巴集 ...

  4. ngx通讯之可观察对象实现

    1.公共服务 //test.service.ts import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Subje ...

  5. vs2015类中方法前的引用链接不显示的解决方案

    在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:&lt;img data-rawheight="761" data-rawwidth="130 ...

  6. Spring整合JUnit4测试时，使用注解引入多个配置文件

    转自:https://blog.csdn.net/pwh309315228/article/details/62226372 一般情况下: @ContextConfiguration(Location ...

  7. 代码 c++实现动态栈

    //============================================================================ // Name : 栈.cpp // Au ...

  8. MD5算法的c++实现

    需要注意的几点: (1)md5存取的数据长度仅为64位,位于数据的最前端,大于令其自然溢出. (2)update函数和final函数处理得很繁琐,需要仔细分析. (3)16位md5码取32位md5码的 ...

  9. R语言系列：数据的基本运算

    基本运算符号  1.基本数学计算  +.-.*./.^.%%(求模).%/%(整除)  注意:求模运算两边若为小数,则整数和小数部分分别求模.例:5.6%%2.2  2.比较运算  >.< ...

  10. 看下面代码输出结果Java

    编译错误 在调用子类构造器之前,会先调用父类构造器,当子类构造器中没有使用"super(参数或无参数)"指定调用父类构造器时,是默认调用父类的无参构造器,如果父类中包含有参构造器, ...