JS面向对象案例

最新推荐文章于 2024-04-05 15:19:57 发布
最新推荐文章于 2024-04-05 15:19:57 发布
阅读量510 收藏
点赞数
分类专栏： web前端 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Python1One/article/details/120353742
版权

JS面向对象案例

1. 创建一个狗

<!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>
    <script>
        //1. 创建一个狗
        var dog = {
            name: '可可',
            type: '阿拉斯加',
            age: '5岁',
            color: '棕红色',
            my: function () {
                alert("我叫:" + dog.name + ",今年:" + dog.age + ",我是一只:" + dog.type + ",我是" + dog.color + "色。");
            }
        }

        alert(dog.name);
        alert(dog.type);
        dog.my();
    </script>

</head>

<body>

</body>

</html>

2. 创建一个鸣人

<!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>
    <script>
        //1. 创建一个狗
        var dog = {
            name: '可可',
            type: '阿拉斯加',
            age: '5岁',
            color: '棕红色',
            my: function () {
                alert("我叫:" + dog.name + ",今年:" + dog.age + ",我是一只:" + dog.type + ",我是" + dog.color + "色。");
            }
        }
        //2.使用new Object创建一个人
        var obj = new Object();
        obj.name = "名人";
        obj.sex = '男';
        obj.age = 19;
        obj.skill = function (str) {
            alert('我会' + str);
        }


        alert(dog.name);
        alert(dog['type']);
        dog.my();

        alert(obj.name);
        alert(obj['sex']);
        obj.skill("吃饭睡觉打豆豆");
    </script>

</head>

<body>

</body>

</html>

3. new Object创建对象

<!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>
    <script>
        function Star(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.sk = function (sk) {
                alert('我会' + sk);
            }

        }
        var ldh = new Star('刘德华', 21, '男');
        alert(ldh.uname);
        alert(ldh['sex']);
        ldh.sk("唱歌");

        var zxy = new Star('张学友', 21, '男');
        alert(ldh.uname);
        alert(ldh['sex']);
        ldh.sk('食屎');
    </script>

</head>

<body>

</body>

</html>
Z_cx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 面向对象编程实例
w632235548的专栏
01-18 8091
当我们在写js代码的时候，总是会想能否和java一样面向对象去编程，让人更易维护以及代码的分离。下面举一例说明：jsp页面如下<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</tit
编写js，使用对象字面量的形式创建一个名字为可可的狗的对象，具体信息如下：
girls的博客
12-30 8761
名称：可可 类型：阿拉斯加犬 年龄：5岁 颜色：棕红色 技能：汪汪叫，摇尾巴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
03 day2--javascript笔记pink老师--对象
小女不才
08-31 1109
思维导图 1.基础篇— 对象 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的： 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 1.1 创建对象 在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）： 利用字面量创建对象；利用 new Object创建对象；利用构造函数创建对象 1.1.1 利用字面量创建对象 对象字面量
鸣人的影分身
最新发布
m0_62977895的博客
04-05 190
int main()int T;int n, m;i <= m;i ++ )j <= n;j ++ )return 0;
五、JavaScript 对象 - 章节课后练习题及答案
热门推荐
熊先森的博客
03-26 1万+
JavaScript 对象 - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍
JS高级（面向对象的使用）
weixin_57920269的博客
04-01 242
了解一下面向对象
js 面向对象案例
09-19
js 面向对象案例,这个kdmlkfmdkfmdslfmldsfmldsmfds...
js 面向对象实例
05-30
帮助理解js 面向对象，以及canvas 的使用
JS面向对象经典案例
08-27
JS面向对象经典案例，JS面向对象过程中用到的一些技术，例如对象、类、JS继承Call、JS原型链Prototype、JS闭包等等
面向对象分析过程案例实战
01-31
但是由于个人时间有限，在抉择之后，打算先写一篇关于面向对象分析的文章，也算是对自己过去 1年多在这方面学习的总结。我选了比较简单且大家也比较熟悉的案例来分析，案例虽然简单，但是基本的分析方法和推导过程还
【JavaScript高级】面向对象编程
前端知识分享喵
08-24 568
要理解面向对象，就要理解什么是 面向过程。原生JavaScipt案例合集JavaScript +DOM基础JavaScript 基础到高级Canvas游戏开发面向过程注重的是解决问题的步骤，利用函数去实现每一步过程，没有类和对象的概念，常见的面向过程的语言 C 语言。面向对象注重使用对象去解决某一个问题，具有类和对象的概念。类是抽象的，注重的是一类的东西，比如说人类、鸟类、猫科等等，从这些类中拿到具体的对象，对象就是一个比较明确的个体，利用这个对象去解决针对性的问题。
字面量创建对象
qq_44888570的博客
11-11 1723
在JavaScript高级程序设计第三版书籍中，推荐使用字面量表示法创建对象。 构造函数创建和字面量创建： var obj = new Object(); obj.name = 'zed'; console.log(obj) var obj1 = { name: 'zed' } console.log(obj1) 两者均能成功创建对象。 字面量的好处是： 可读性，可维护性好，更加体现了封装性。 性能略好，js引擎不用解析作用域，因为不用担
js面向对象实例
dingdunzeng9939的博客
03-04 222
JSON方式来编写对象简单 不适合多个对象 var json={a:12, show:function (){ alert(this); }};json.show(); //理所当然弹出的是object(this指的是json) call函数 function show(){ alert(this)...
深圳Java培训：简单案例来看JS中的面向对象
莫安迪
08-22 160
深圳Java培训：简单案例来看JS中的面向对象 在JS中，一般情况下我们都是直接写函数，直接调用，但是发现JS中也有new关键字，那么new关键字作为创建对象的关键字，给我们的感觉就是在JS中可以定义一个类，然后用new创建对象，那么在JS中如何做呢？我们先看如下案例，下面的案例是写一个简单的喷泉效果的。 window.onload = function(){ // 创建一个画布对象 var c...
JS面向对象实例、高级
weihongda666的博客
01-10 1814
·  选项卡用面向过程1 window.onload=function () { var oDiv = document.getElementById('div1'); var aDiv = oDiv.getElementsByTagName('div'); var aBtn = oDiv.getElementsByTagName('input'); for (var i=0;i<aB
JS面向对象编程实例——烟花（随即落下）
SKY__MOON的博客
05-04 606
css样式 /*给box添加样式*/ .box{width:1000px;height:500px;background:black;margin:20px auto;cursor:pointer;position:relative;overflow: hidden} /*为烟花上升过程中的元素添加样式*/ .box .fire{width:10px;height:10px;position:ab...
JS面向对象例子
HI,我是小瑞！
07-01 1252
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CO
JavaScript 之面向对象
msn131420的博客
03-03 4216
JavaScript 面向对象 一、面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 举个栗子：将大象装进冰箱，面向过程做法。 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 1.3 面向对象编程 OOP (Object Oriented .
Javascript面向对象程序设计案例
06-01
以下是一个基于面向对象编程的JavaScript案例： ```javascript // 定义一个Animal类 class Animal { constructor(name, age) { this.name = name; this.age = age; } // 定义一个eat方法 eat(food) { console.log(`${this.name} is eating ${food}`); } } // 定义一个Dog类，继承自Animal类 class Dog extends Animal { constructor(name, age, breed) { super(name, age); this.breed = breed; } // 定义一个bark方法 bark() { console.log(`${this.name} is barking!`); } } // 创建一个Dog实例 const myDog = new Dog('Max', 3, 'Labrador'); // 调用Dog类的方法 myDog.bark(); // Max is barking! myDog.eat('meat'); // Max is eating meat ``` 在上面的案例中，我们定义了一个Animal类和一个Dog类，Dog类继承自Animal类。Animal类有一个构造函数和一个eat方法，Dog类有一个构造函数和一个bark方法。我们创建了一个Dog实例，并调用了Dog类和Animal类的方法。通过面向对象编程的方式，我们可以更好地组织和管理代码，使其更具可读性和可维护性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值