web前端之面向对象

最新推荐文章于 2023-05-23 19:45:58 发布
最新推荐文章于 2023-05-23 19:45:58 发布
阅读量500 收藏
点赞数 1
分类专栏： web前端 JavaScript 文章标签： web前端 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014785563/article/details/75332042
版权

web前端之面向对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
var obj={};
obj.name="FZW";
obj.code="18";
obj.showName=function(){
    alert("我的名字叫："+this.name);
};
obj.showCode=function(){
    alert("code:"+this.code);
};
obj.showName();
obj.showCode();
</script>
</head>
<body>
</body>
</html>

一个简单的面向对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
var obj={};
obj.name="FZW";
obj.code="18";
obj.showName=function(){
    alert("我的名字叫："+this.name);
};
obj.showCode=function(){
    alert("code:"+this.code);
};
obj.showName();
obj.showCode();
</script>
</head>
<body>
</body>
</html>

使用this来面向对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function newObj(name,code){
    // var obj={};
    this.name=name;
    this.code=code;
    this.showName=function(){
        alert("我的名字叫："+this.name);
    };
    this.showCode=function(){
        alert("code:"+this.code);
    };
    // return obj;
};
var obj=new newObj("lalala",18);
obj.showCode();
obj.showName();
</script>
</head>
<body>

</body>
</html>
css         
class      一次给一组元素加样式         原型
行间样式    一次给一个元素加样式         给对象加东西
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr1=[1,2,3,1,12,2];
var arr2=[12,23,11];
// arr1.sum=function(){
//     var result=0;
//     var that=this;
//     that.forEach(function(value,index){
//         result+=that[index];
//     });
//     return result;
// }
// alert(arr1.sum());相当于行间样式
// alert(arr2.sum());


Array.prototype.sum=function(){
    var result=0;
    var that=this;
    that.forEach(function(value,index){
        result+=value;
    });
    return result;
};
alert(arr1.sum());
alert(arr2.sum());
</script>
</head>
<body>

</body>
</html>

面向对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function newObj(name,code){
    // var obj={};
    this.name=name;
    this.code=code;
    // 在构造方法加属性
};
newObj.prototype.showName=function(){//在原型里面加事件
    alert("我的名字叫："+this.name);
};
newObj.prototype.showCode=function(){
    alert("code:"+this.code);
};
var obj=new newObj("lalala",18);
obj.showCode();
obj.showName();
var obj1=new newObj("123",123);
obj1.showCode();
obj2.showName();
</script>
</head>
<body>

</body>
</html>
爸爸去哪了2之熊猫三胞胎
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
web前端开发中关于面向对象（一）
lavendersue的博客
10-23 3722
IT专业人员应该都会涉及到一门语言：C++语言。C++语言中就提到了面向过程和面向对象的思想。面向过程、面向对象的思想不仅仅存在于C++语言中，Java、.NET、web前端开发中也存在。那么，web前端开发中，面向对象又是什么？今天，和大家一起学习web前端中关于面向对象。 一、什么是对象？ 对象的某种事物，本质是无序的键值对的集合，可以说，万物皆对象。在语言中，对象...
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
web前端 之 面向对象
mao871863224的博客
12-07 233
web前端之面向对象
web前端技术基础课程详解之JavaScript面向对象
QF _WEB
12-05 378
JavaScript中的面向对象是个老生常谈的话题，但是依然有很多小伙伴处于懵逼状态。面试时候最担心的就是被问到面向对象相关的内容，自己看过无数的资料，依然对面向对象百思不得其解。到底什么是原型？什么是构造函数？什么是继承。。。一提到这些概念那真是欲哭无泪、悲愤交加，甚至恨的直咬牙！所以有必要谈一次面向对象。 对象在生活中指的是女朋友或者男朋友，而在JavaScript里说的通俗一点就是一个放了很...
web前端开发中关于面向对象（二）
lavendersue的博客
10-24 388
各种语言中，面向对象中不可缺少的亦是核心的自然是函数，且该函数不是普通的函数，而是构造函数，是通过关键字new进行实例化出来的。因此，函数的重要性显而易见，故而简单说一说函数。 一、函数的产生方式 1、通过函数声明产生： function 函数名(参数：可有可无){ 代码块; return 1;//返回值，可有可无 ...
Web前端学习笔记——JavaScript之面向对象编程
唯恋殊雨的博客
09-24 2811
JavaScript 高级 在线地址：JavaScript 高级 基本概念复习 由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习，所以在开始之前我们先对以前所学过的 JavaScript 相关知识点做一个快速复习总结。 重新介绍 JavaScript JavaScript 是什么 解析执行：轻量级解释型的，或是 JIT 编译型的程序设计语言 语言特点：...
web 前端年总结ppt模板
01-21
在文件的部分内容中，我们可以看到深化面向对象开发，抽取共同部分生成可复用组件。这一点对于前端开发者来说非常重要，因为它可以提高代码的可维护性和重用性。 6. 变量类型问题的解决方法 在文件的部分内容中，...
web前端实训总结.doc
12-21
* 培养我们综合运用已学知识 Java 语言的面向对象编程能力 * 掌握 Java 语言的面向对象编程特性 6. 数据库设计和 SQL 应用 * 数据库设计和 SQL 应用的基本概念 * Oracle 数据库管理系统的应用和特性 7. JavaSE、...
Web前端开发知识体系大全
03-18
对于Web前端开发来说，它是首选的开发环境之一。 - **Sublime Text**: Sublime Text是一个高度可定制的文本编辑器，以其速度和灵活性著称。配合Zencoding插件可以极大地提高编码效率。 - **Grunt/Gulp**: Grunt和...
案例学web前端开发.rar
07-03
3. JavaScript：JavaScript是一种解释型的、面向对象的、弱类型的脚本语言，主要用于增加网页的交互性。它可以用于处理用户输入、改变HTML内容、执行动画以及与服务器进行异步通信（Ajax）。 4. DOM（Document ...
【web】 面向对象
博客
10-25 434
（先在自己的构造函数中寻找，如果没有就到自己的原型中寻找，如果还没有，就到原型的原型中去找，一直找到Object的原型，如果还没有就报错）原型 该类的公共空间，节省内存，本质是个对象。主要通过call（）或者apply（）实现。析构函数：释放内存空间（JS会自己释放）原型链 对象调用属性或方法的寻找过程。写法简易，语法简单，但是重用性低。适用于整个程序里只有一个的对象。new出来的是一个具体的对象。工作原理，改变this指向。构造函数：开辟内存空间。
JavaWeb入门（二） 面向对象篇
有余力，则学文。
12-29 488
JavaWeb-Java面向对象篇标签（空格分隔）： JavaWeb原文地址封装 Encapsulation把类的一些描述细节隐藏在内部，用户只能通过接口访问类中的内容，这种组织模块的方式称为封装。例class People{ private String name = ""; public void setName(String _name){ this.na
[最完整的前端学习手册]——面向对象
weixin_48683052的博客
08-12 935
注：json字符串和普通对象的区别：json字符串会直接忽略function(本质函数，有new关键字介入改变this指向)console.log("猫")}}​js的对象都是由原型对象拷贝而来，原型对象也由自己的原型拷贝而来，这样就形成一条拷贝链，将这条拷贝链称为原型链当一个对象，去调用某个方法，或者属性，该对象先在自己的属性和方法中找，如果没找到就在原型上找，如果原型也没有，就在原型的原型上继续寻找，找到后直接调用。......
Web前端 面向对象
m0_72686628的博客
09-21 252
1.字面量创建 对象是由属性和方法组成的"属性名"：属性值"方法名"：function(){}}2.使用new 关键字创建//给obj添加属性和方法3.工厂模式创建}4.构造函数创建}//实例化对象(调用构造函数)5.原型创建prototype原型：每创建构造函数 都会自带一个prototype 用于存储共享的属性和方法。
前端面向对象
XIAOMAO1107的博客
08-12 706
关于面向对象开发前端简单写法。 1.如果你是学的后端，想了解前端面向对象的写法，很容易上手。 2.面向对象是一种思维模式。（个人见解），本人是学的后端，对于前端浅浅认知。 3.为了便于理解，最好对jquery或者 javascript,CSS有一定的了解。
做Web应用程序时应该如何面向对象杂谈
04-12 857
　做Web应用程序很多年了，却一直使用非常熟悉的方式，三层结构（Dal,bll,Web），可是仔细一想哪里有用到面向对象？貌似没有吧，顶多隔离业务和数据了。那么MVC呢，它其实也只是改变了我们编程的方式，准确的说是页面的处理方式，我们一样写dal,bll,web。可是有的时候却很想用用面向对象，可是思考许久却不知如何下手，不知道大家有没有有过类假的情景。
面向对象的WebAPI框架XXL-HEX
weixin_30483013的博客
11-28 99
《面向对象的WebAPI框架XXL-HEX》 一、简介 1.1 概述 XXL-HEX 是一个简单易用的WebAPI框架, 拥有 "面向对象、数据加密、跨语言" 的特点。目标是: 提高Web API (如 Android、IOS 等APP接口, 或者 unity3d 等游戏服务端接口) 的开发体验以及开发效率。现已开放源代码，开箱即用。 1.2 特性 1、面向...
前端当中的面向对象理解
最新发布
qq_70876597的博客
05-23 751
面向过程和面向对象的区别，前端中的面向对象如何理解
前端开发之面向对象
alexwang的博客
06-01 1248
来源: 新浪UED 发布时间: 2013-01-15 13:38 阅读: 11650 次 推荐: 17 原文链接 [收藏] 　　【一】 面向对象的基本概念　　面向对象的英文全称叫做Object Oriented，简称OO。OO其实包括OOA(Object Oriented Analysis，面向对象分析)、OOD(Object Oriented Design，面向对象设计)和OOP(Object Oriented Programming，面向对象的程序设计)。　　通常所说的面向对象是指OOP
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值