溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript學(xué)習(xí)筆記（五）

發(fā)布時(shí)間：2020-07-16 09:32:45 來源：網(wǎng)絡(luò) 閱讀：264 作者：mirindaRain 欄目：web開發(fā)

本課程學(xué)習(xí)視頻教程：http://edu.51cto.com/course/15019.html

1、javascript的面向?qū)ο?/h2>

1.1、創(chuàng)建對(duì)象的方式

方式一：使用object對(duì)象搞定

<script type="text/javascript">
        //創(chuàng)建一個(gè)對(duì)象
        var object = new Object();
        //在js中對(duì)象可以動(dòng)態(tài)的添加屬性和方法
        object.name = "張三";
        object.age = 15 ;
        //動(dòng)態(tài)添加方法
        object.sayHello=function(){
            console.log(this.name,this.age);
        };
        //動(dòng)態(tài)刪除某個(gè)對(duì)象的方法或者屬性
        delete object.sayHello;
        //object.sayHello();
        console.log(object);
</script>

方式二：json格式

json的格式：

JavaScript學(xué)習(xí)筆記（五）

 var stu={
                name:"zhangsan",
                addr:"南京",
                age:15,
                say:function () {
                    console.log(this.name,this.age,this.addr);
                }
        }
        stu.say();

json數(shù)組：

JavaScript學(xué)習(xí)筆記（五）

value的變化多端

JavaScript學(xué)習(xí)筆記（五）

<script type="text/javascript">
        var students=[
            {
               name:"關(guān)羽",
               type:"坦克"
            },
            {
                name:"阿珂",
                type:"刺客"
            },
            {
                name:"老亞瑟",
                type:"坦克"
            },
            {
                name:"王昭君",
                type:"法師"
            }
        ]
        for(var i = 0;i<students.length;i++) {
            console.log(students[i].name,students[i].type)
        }
    </script>

方式三：工廠方法


function createObject(name,age){
    var object = new Object();
    object.name = name;
    object.age=age;
    object.say=function(){
        console.log(this.name,this.age);
    }
    return object ;
}
//創(chuàng)建對(duì)象
var object1 = createObject("張三",15);
//調(diào)用方法
object1.say();
//創(chuàng)建對(duì)象
var object2 = createObject("李四",20);
//調(diào)用方法
object2.say();

方式四：構(gòu)造函數(shù)

題外話

function Person(){
            console.log(this.name,this.age);
}
//函數(shù)的普通調(diào)用方式
window.name="hello";
window.age=15;
Person();
Person();
默認(rèn)直接調(diào)用函數(shù)實(shí)際上調(diào)用的對(duì)象是window對(duì)象

創(chuàng)建對(duì)象

<script type="text/javascript">
        function Person(name,age){
            this.name = name
            this.age = age;
            this.say=sayInfo;
        }

        function sayInfo(){
            console.log(this.name,this.age);
        }
        //采用new的方式調(diào)用實(shí)際上省略了創(chuàng)建對(duì)象和返回對(duì)象的過程
        var p1 = new Person("張三",15);
        var p2 = new Person("李四",20);
        p1.say();
        p2.say();
    </script>

方式五：原型模式

<script type="text/javascript">
        //構(gòu)造中一般放屬性
        function Person(name,age){
            this.name = name ;
            this.age = age ;
        }
        //通過prototype屬性，我們可以原型上加上方法和屬性
        Person.prototype.say=function(){
            console.log(this.name,this.age);
        };
        Person.prototype.sayWorld=function(){
            console.log("helloworld");
        };

        var p1 = new Person("zhangsan",15);
        var p2 = new Person("lisi",16);

        console.log(p1);
        console.log(p2);
        p1.sayWorld();
        p2.sayWorld();
    </script>

1.2、繼承

1.2.1、對(duì)象冒充方式

利用的原理就是動(dòng)態(tài)添加方法，轉(zhuǎn)移this的指向

<script type="text/javascript">
        function Parent(name) {
            console.log(this);
            this.name = name ;
        }
        function Son(name,age) {
            //Parent(name);
            this.method=Parent;
            this.method(name);
            //將這個(gè)method方法在動(dòng)態(tài)刪除掉
            delete this.method;
            //子類特有的
            this.age = age ;
        }
        var s = new Son("張三",15);
        console.log(s.name,s.age);
    </script>

1.2.2、apply和call方式

call方法介紹

call 方法:調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
參數(shù)
thisObj:可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。
arg1, arg2,  , argN:可選項(xiàng)。將被傳遞方法參數(shù)序列。

使用call方法來改寫上面的案例

 <script type="text/javascript">
        function Parent(name) {
            console.log(this);
            this.name = name ;
        }
        function Son(name,age) {
            Parent.call(this,name);
            //子類特有的
            this.age = age ;
        }
        var s = new Son("張三",15);
        console.log(s.name,s.age);
   </script>

apply：和call用法基本一致

apply 方法:應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

apply([thisObj[,argArray]])

參數(shù):thisObj可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。

argArray：可選項(xiàng)。將被傳遞給該函數(shù)的參數(shù)數(shù)組。

apply方式來改寫案例

<script type="text/javascript">
        function Parent(name) {
            console.log(this);
            this.name = name ;
        }
        function Son(name,age) {
            Parent.apply(this,[name]);
            //子類特有的
            this.age = age ;
        }
        var s = new Son("張三",15);
        console.log(s.name,s.age);
</script>

1.2.3、采用原型+apply的混合方式實(shí)現(xiàn)繼承

<script type="text/javascript">
        function Parent(name) {
            console.log(this);
            this.name = name ;
        }
        //父類的方法
        Parent.prototype.sayHello=function(){
            console.log("helloworld");
        }
        function Son(name,age) {
            Parent.apply(this,[name]);
            //子類特有的
            this.age = age ;
        }
        //將父類原型上的屬性和方法移植子類中
        Son.prototype=new Parent();
        var s = new Son("張三",15);
        console.log(s.name,s.age);
        s.sayHello();
 </script>

補(bǔ)充知識(shí)點(diǎn)：

callee :返回正被執(zhí)行的 Function對(duì)象，也就是所指定的 Function 對(duì)象的正文

function factorial(n){
            if (n <= 0)
                return 1;
            else
                return n * arguments.callee(n - 1)
 }
console.log(factorial(5));

eval()：執(zhí)行eval參數(shù)中js代碼

 eval("var mydate = new Date();");
 alert(mydate);

練習(xí)：

編寫一個(gè)形狀類，它是一個(gè)父類

然后編寫一個(gè)長方形類，要求求出長方形的周長

在編寫一個(gè)三角形類，求出三角形的周長

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function Shape(width){
            this.width=width;
        }
        Shape.prototype.getLength=function(){
            console.log('正在獲取長度');
        };

        function Rectangle(width,height){
            Shape.call(this,width);
            this.height = height;
        }
        Rectangle.prototype = new Shape();
        Rectangle.prototype.getLength=function(){
            return (this.width+this.height)*2;
        };

        //創(chuàng)建一個(gè)長方形對(duì)象

        var re = new Rectangle(10,20);
        console.log(re);
        console.log(re.getLength());
        //對(duì)象的__proto__恒等于Rectangle.prototype屬性
        //console.log(re.__proto__===Rectangle.prototype);
        console.log(1=="1");
        //先比較數(shù)據(jù)類型，如果數(shù)據(jù)類型不一樣，就直接over（false）
        console.log(1==="1");
        //創(chuàng)建一個(gè)三角形的類
        function Triangle(width,height,c){
            Shape.call(this,width);
            this.height=height;
            this.c = c ;
        }
        Triangle.prototype = new Shape();

        Triangle.prototype.getLength = function(){
            return this.width+this.height+this.c;
        }
        var tr = new Triangle(1,2,3);
        console.log("三角形的長度為："+tr.getLength());
    </script>
</head>
<body>
</body>
</html>
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手