js object creation method

I'm too lazy to write js, everyone looks directly at the div
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=200"/>
    <!--device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no-->
    <script type="application/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <link data-th-href="@{/css/bootstrap.css}"  rel="stylesheet" type="text/css">
    <link th:href="@{/css/bootstrap-theme.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jsObjects.js}" type="application/javascript"></script>
    <title>Demos for JS Object Creation</title>
</head>
<body>


<a href="#" class="list-group-item active">
    JS 对象创建案例
</a>
<a href="#div_1" data-toggle="collapse" class="list-group-item">对象字面量
    <div id="div_1" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            var student = {
            name : 'John Ripper',
            age : 20,
            ID : 'JX190207',
            activate: false,
            enroll : function() {
            alert('enroll successfully');
            }
            }</pre>
        </div>
    </div>
</a>

<a href="#div_2" data-toggle="collapse" class="list-group-item">Object构造函数
    <div id="div_2" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            var student2 = new Object();
            student2.name = "Jack Ma";
            student2.age = 56;
            student2.ID = 'JX1902071';
            student2.activate = false;
            student2.enroll = function () {
            alert(this.name + "enrolled!");
    };
            student2.exam = function(){
            alert(this.name + ' is taking exam now!');
    };

        </pre>
        </div>
    </div>
</a>
<a href="#div_3" data-toggle="collapse"  class="list-group-item">自定义构造函数
    <div id="div_3" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            function Student(name, age, ID, activate) {
             this.name =  name;
             this.age = age;
             this.ID = ID;
             this.activate = activate;
             this.enroll = function(){
             alert(this.name +", ID: " + this.ID + " enrolled success!");
    };
            this.study = function(){
            alert(this.name + ' is studying!');
    };
}
    var student3 = new Student('Tony Ma',49,'JX1902072', true);</pre>
        </div>
    </div>
</a>
<a href="#div_4" data-toggle="collapse"  class="list-group-item">工厂模式
    <div id="div_4" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
        function Student2(name,age,ID,activate){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.ID = ID;
            obj.activate=activate;
            this.enroll=function(){
            alert('name : ' + this.name + ' enroll success!');
    };
        this.homework = function(){
        alert(this.name + ' homework submitted!');
    };
}
var student4 = new Student2('Jony Li',56,'JX1902074',true);
        </pre>
        </div>
    </div>
</a>

<a href="#div_5" data-toggle="collapse"  class="list-group-item">原型模型
    <div id="div_5" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            function prototypeCreation(student4){
                student4.prototype.registeredSubject = ['java','html','css','rdb','c++'];
                student4.prototype.homework = function(subject) {
                alert(this.name + ' has submitted ' + subject + '\'s home' );
            }
            student4.homework('java');
}
</pre>
        </div>
    </div>
</a>
<a href="#div_6" data-toggle="collapse"  class="list-group-item">Object.create()
    <div id="div_6" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            function Student6() {}
            Student6.prototype ={
            name: 'Kevin',
            nationality: 'Korean',
            gender: 'male',
            age: 56,
            hobby: ['Hiking','Reading','Swimming']
}
        var student6 = Object.create(Student6.prototype);</pre>
        </div>
    </div>
</a>
<a href="#div_7" data-toggle="collapse"  class="list-group-item">$.extend()
    <div id="div_7" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            function jqueryExtendDemo(student, student2){
            $.extend(student, student2);
            student.exam();
        }
</pre>
        </div>
    </div>
</a>
<a href="#div_8" data-toggle="collapse"  class="list-group-item">$.fn.entend()
    <div id="div_8" class="panel-collapse collapse ">
        <div class="panel-body"><pre>
            $.fn.extend({
                alertWhileClick: function(){
                    $(this).click(function(){
                    alert($(this).val());
                });
            }});
            $("#clickableInput").on(
             "onclick", $.fn.alertWhileClick
            );
            </pre>
        </div>
    </div>
</a>
<div class="input-group">
    <span class="input-group-addon"   >@</span>
    <input type="text" class="form-control"  id="clickableInput"  readonly value="twitterhandle">
</div>
</body>
</html>
ChyoD1811
Published 22 original articles · Like 3 · Visitor 3442
Private letter concerns
js object creation method

Guess you like
