javascript面向对象编程

ゞ浴缸里的玫瑰 2022-06-14 05:59 285阅读 0赞

# javascript面向对象编程的四种方式 #

## 1. 字面量方式定义对象 ##

主要应用于属性多的对象。直接创建一个对象。

<script> //1. 按照字面量方式 定义对象 var student = { "sname":"tom","sex":"", "getsname":function(){ return this.sname}, "setsex":function(arg){ this.sex=arg} }; console.log(student.sname); console.log(student.getsname()); student.setsex("f"); console.log(student.sex); </script>

![运行结果][SouthEast]

## 2.工厂方法 ##

存在一个工厂，每次调用都可以生成一个对象。

function getStudent(_sname,_sex) { 
                    var student = new Object();
                    student.sname=_sname;
                    student.sex=_sex;
                    student.getsname=function(){ 
                        return this.sname;
                    }
                    student.setsname = function(_sname) { 
                        this.sname=_sname;
                    }
                    return student;
                }
                var student = getStudent("hah","aha");
    // student.setsname("jack");
                console.log(student.getsname());

## 3.构造方法 ##

function Student(_sname,_sex) { 
                    this.sname=_sname;
                    this.sex=_sex;
                    this.getsname=function() { 
                        return this.sname;
                    }
                    this.setsname=function(_sname) { 
                        this.sname=_sname;
                    }
                }
                var student = new Student("this","that");
    // student.setsname("blue");
                console.log(student.getsname());

## 4.通过原型的方式 ##

function Student(){ }
                Student.prototype.sname="tom";
                Student.prototype.sex="m";
                Student.prototype.setsname=function(_sname) { 
                    this.sname=_sname;
                }
                Student.prototype.getsname=function() { 
                    return this.sname;
                }
    
                var student = new Student();
                student.setsname("yuanxing");
    
                var student2 = new Student();
                student2.setsname("diergename");
                console.log(student.getsname());
                console.log(student2.getsname());

很多时候需要将 34中方法结合使用，例如

function Student(_sname,_sex) { 
                    this.sname=_sname;
                    this.sex=_sex;
                    Student.prototype.setsname=function(_sname) { 
                        this.sname=_sname;
                    }
                    Student.prototype.getsname=function() { 
                        return this.sname;
                    }
                }
                    var student = new Student("hhe","m");
                    console.log(student.getsname());
                    student.setsname("xixi");
                    console.log(student.getsname());

下面是两个练习：  
练习1：扩展Date类，添加getday1（dnum），0->星期日，1->星期一

Date.prototype.getDay1 = function(){ 
                    var day = this.getDay();
                    switch(day)
                    {
                        case 0:return "星期日";
                        case 1:return "星期1";
                        case 2:return "星期2";
                        case 3:return "星期3";
                        case 4:return "星期4";
                        case 5:return "星期5";
                        case 6:return "星期6";
                    }
                }
                var now = new Date();
                console.log(now.getDay1());

练习2：扩展string类，trim1（） 去字符串前后空格 不去中间空格

var str = " a b c e ";
                String.prototype.trim1 = function() { 
                    var str = this.toString();
    // while(str.charAt(0)==" ")
    // { 
    // //截掉第一个空格 
    // str = str.substring(1,str.length);
    // }
    // while(str.charAt(str.length-1)==" ")
    // { 
    // str = str.substr(0,str.length-1);
    // }
    // 正则表达式的方法也可以
                    str = str.replace(/^\s*|\s*$/g,"");
                    return str;
                }
                console.log(str.trim1().length);

[SouthEast]: /images/20220614/0700adfcf2954de6afb0cf0668e8b02b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript面向对象编程浅析

JavaScript面向对象编程及设计模式 JavaScript面向对象编程及设计模式一、面向对象编程 1、简述

逃离我推掉我的手/ 2023年01月13日 05:48/ 0 赞/ 158 阅读

相关 JavaScript的面向对象编程

JavaScript的面向对象编程面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。它将真实世界各种复杂

ゞ浴缸里的玫瑰/ 2022年12月22日 06:11/ 0 赞/ 139 阅读

相关 Javascript面向对象编程

JS面向对象的程序设计，JS在很早以前一直被认为毫无章法的语言，大部分初学者写的时候都是运用面向过程的思维来编写JS的（一页下来就是一个function接着另一个functio

朴灿烈づ我的快乐病毒、/ 2022年09月21日 13:18/ 0 赞/ 233 阅读

相关面向对象的JavaScript编程

面向对象的 JavaScript 编程 Javascript 对于做过 Web 程序的人不应该是陌生，初期是用来做一些简单的 FORM 验证，基本上是在玩弄一些

以你之姓@/ 2022年09月18日 04:58/ 0 赞/ 222 阅读

相关 javascript面向对象编程

javascript面向对象编程的四种方式 1. 字面量方式定义对象主要应用于属性多的对象。直接创建一个对象。 <script> //1. 按照字面量方

ゞ浴缸里的玫瑰/ 2022年06月14日 05:59/ 0 赞/ 286 阅读

相关 Javascript 面向对象编程（一）：封装

作者：阮一峰 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的

水深无声/ 2022年06月07日 12:52/ 0 赞/ 245 阅读

相关 JavaScript面向对象编程

创建对象创建对象可以利用Object构造函数创建新对象 var stu = new Object(); 或者用字面量去创建对象 var stu = \{\}; 这

一时失言乱红尘/ 2022年06月02日 00:26/ 0 赞/ 247 阅读

相关关于JavaScript面向对象编程

1. 对象可以包含相关的数据和代码,这些代表现实世界模型的一些信息或者功能,或者它特有的一些行为. 对象数据(也经常称为函数) 可以有结构的存储 (官方术语为封装) 在对象

「爱情、让人受尽委屈。」/ 2022年05月14日 03:05/ 0 赞/ 273 阅读

相关前端_JavaScript_面向对象编程

面向对象编程 Objects对象的原生方法分成两类：Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象，所有的其

小灰灰/ 2022年03月07日 01:35/ 0 赞/ 297 阅读

相关 javascript面向对象编程（OOP）——汇总

> 一、JS的解析与执行过程 > 预处理阶段 > 执行阶段 > 二、作用域 > 块作用域 > 函

缺乏、安全感/ 2021年07月05日 02:11/ 0 赞/ 497 阅读