JavaScript-④

面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function Circle(r){
            if(this instanceof Circle){//new
                this.area = function Circle(){
                    return Math.PI*r*r;
                }
                this.primeter = function Circle(){
                    return Math.PI*2*r;
                }
                this.getR=function(){
                    return r;
                }
                this.setR = function(x){
                    r = x;
                }
            }else{
                return new Circle(r);
            }
        }
        let c = new Circle(10);
        console.log(c.area());
        console.log(c.getR());
        c.setR(100);
        console.log(c.getR());
        console.log(c.area());
    </script>
</body>
</html>

效果：

会发现getset的方法和正常输出的值不会一样

引入外联js
ms.js

(function(m){
    function add(num1, num2){
        return num1+=num2;
    }
    function sub(num1,num2){
        return num1-=num2;
    }
    function divide(num1,num2){
        return num1/=num2;
    }
    function muti(num1,num2){
        return num1*=num2;
    }
    m["$"]={
        //引用 实际是后面的值起作用
        //add:add
        //sub:sub
        add,
        sub,
        divide,
        muti
    }
})(window||{});

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="04ms.js"></script>
</head>
<body>
    <script>
        var res = $.add(3,4);
        console.log(res);
        </script>
</body>
</html>

效果：可以进行运算
在这里插入图片描述

函数方法-call-apply-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var o=[];
        function Circle(r){
            this.r=r;
            this.area = function Circle(){
                return Math.PI*r*r;
            }
            this.primeter = function Circle(){
                return Math.PI*2*r;
            }
        }
        Circle(10);//当前windows绑定area，primeter
        //通过函数方法改变绑定（this的指向）call apply bind
        Circle.call(o,10);//o身上绑定
        console.log(o.r);
        
        </script>
</body>
</html>

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var o=[];
        function Circle(r){
            this.r=r;
            this.area = function Circle(){
                return Math.PI*r*r;
            }
            this.primeter = function Circle(){
                return Math.PI*2*r;
            }
        }
        Circle.apply(o,[100]);//变成一个数组传进去
        console.log(o.r);
        </script>
</body>
</html>

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var o=[];
        function Circle(r){
            this.r=r;
            this.area = function Circle(){
                return Math.PI*r*r;
            }
            this.primeter = function Circle(){
                return Math.PI*2*r;
            }
        }
        var fn=Circle.bind(o);//this指向o，
        fn(1000);
        console.log(o.r);
        console.log(o.area());
        </script>
</body>
</html>

效果：
在这里插入图片描述

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var fn = function(num){
            console.log(num);
        }
        fn(10);
    </script>
</body>
</html>

效果：
在这里插入图片描述

立即执行函数
普通函数

 var fn=function(num){
            console.log(num);
            }
            fn(10);

出入的num就是10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
     (function(num){
     console.log(num);
     }
     )(100);
//立即执行函数
     (
         function(x){
             console.log("here");
         }
     )() 
    </script>
</body>
</html>

效果：
在这里插入图片描述

立即执行函数打印10个10

<script>
function test() {
    var arr = [];
    for(var i=0;i<10;i++){
        arr[i]=function () {
            console.log(i);
        }
    }
    return arr;
}
var myArr = test();
for(var j=0;j<10;j++){
    myArr[j]();
}
</script>

效果：
在这里插入图片描述
打印 0-9

<script>
    function createFunction(){
        var result=new Array();
        for(var i=0;i<10;i++){
            result[i]=function(){
                return i;
            }
        }
        return result;
    }
    function createFunction(){
        var result=new Array();
        for(var i=0;i<10;i++){
            result[i]=function(num){
                return function(){
                    return num;
                }
            }(i)
        }
        return result;
    }
    var funs=createFunction();
    funs.forEach(function(e) {
        document.write(e()+"<br>");
    }, this);
</script>

效果：
在这里插入图片描述

效果： 会发现getset的方法和正常输出的值不会一样

立即执行函数打印10个10

猜你喜欢

效果：

会发现getset的方法和正常输出的值不会一样