面向对象的js写法

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{padding:0; margin:0}
        #btn{width:80px;height:30px; border:1px solid #0094ff; background:#eee; line-height:30px; margin:10px auto; text-align:center;cursor:pointer;}
        #clearbtn { width: 80px; height: 30px; border: 1px solid #0094ff; background: #eee; line-height: 30px; margin: 10px auto; text-align: center; cursor: pointer; }
    </style>
    
</head>
<body>
    

    <script>
        var defalt = {
            ‘name‘: ‘小黄毛‘,   
            ‘six‘: ‘男‘,
            ‘age‘: 18
        }
        var people = function () {
            this.name = defalt.name;
            this.six = defalt.six;
            this.age = defalt.age;
            this.doHomeWrok = function (obj) {
                obj = obj || "";
                var name = obj.name || this.name;
                var age = obj.age || this.age;
                var six = obj.six || this.six;
                var oBox = document.getElementById(‘box‘);
                oBox.innerHTML = ‘在下‘ + name + ‘,性别‘ + six + ‘,芳龄‘ + age;
            }
        }
        people.prototype.getAll = function (options) {
            options = options || "";
            var name = options.name || this.name;
            var six = options.six || this.six;
            var age = options.age || this.age;
            return ‘在下‘ + name + ‘,性别‘ + six + ‘,芳龄‘ + age; 
        }
        var hulong = new people();
        var hl = { ‘name‘: ‘大黄猫‘,‘six‘:‘女‘,‘age‘:15 }
        console.info(hulong.getAll(hl));
        function clearDoHomeWrok() {
            var oBox = document.getElementById(‘box‘);
            oBox.innerHTML = "";
        }

    </script>

    <div id="btn" onclick="hulong.doHomeWrok(hl)" >click me</div>
    <div id="clearbtn" onclick="clearDoHomeWrok()">clear</div>
    <div id="box" style="width:200px; height:80px; text-align:center;line-height:80px;border:1px solid #0094ff;margin:50px auto;"></div>
</body>
</html>
时间: 2024-10-11 05:36:43

面向对象的js写法的相关文章

面向对象的js编程 Call和apply方法

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象. arg1, arg2,  , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.  

深入javascript面向对象,js的原型链、继承

进阶面向对象----------------------– 在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象----------------------– 基本类型都有自己对应的包装对象 比如String Number Boolean 基本类型会找到对应的包装对象类型,然后包装对象把所有的属性方法给了 基本类型,然后包装对象消失 例如 var str = 'abc'; str.num = 10; //创建一个包装对象,给包装对象加num属性,然后立刻消失.

cocos-html5 JS 写法基础 语言核心

转载:http://blog.csdn.net/leasystu/article/details/18735797 cocos2dx 3.0 js继承:John Resiq的继承写法解析 CCClass.js cocos2d-html5/cocos2d/core/platform/CCClass.js ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

js中,符合属性的js写法是讲下横杆去掉

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>练习</title> 7 <style type="text/css"

layui的js写法,部分代码

前端html写法: 1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>学生管理</title> 6 <!-- 引入前端框架 --> 7 <link th:href="@

JS面向对象5中写法

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area()); //第2种写法 var Circle = functio

angular.js写法不规范导致错误

以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. 1 <html ng-app> 2 <head> 3 <title>1.0.1-1.5版本间的差异</title> 4 <script src="/js/angular-1.0.1.min.js"></script> <!--可以正常显示--> 5 <!--<script src

面向对象的JS(一)

/*JavaScript和其他的语言类似,也是面向对象,自然也就是存在类和对象(对象是类的实例化)*/ //1.JS对象 var empty = {}; //没有任何属性的对象 var point = { x: 0, y: 0 }; //两个属性和值 var point2 = { x: point.x, y: point.y } //复杂的属性和值 var book = { "main title": "javascript", //属性名字中有空格,必须用字符串表

JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

  前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐渐淘汰:而面向过程的语言也只有C语言老大哥依然坚挺:现在主流的语言(例如Java.C++.PHP等)都是面向对象的语言. 而我们的JavaScript语言,恰恰介于面向过程与面向对象之间,我们称它为"基于对象"的语言.但是,JS中的OOP依