JS函数难点理解-CSDN博客

什么是函数？

函数是一种定义一次，即可多次调用的方法。如果函数挂载在一个对象上，如果通过这个对象来调用这个函数时，该对象就是此次调用的上下文（this的值）。函数可以在函数中定义，就会形成闭包。

    /**
     * 闭包实例
     * todo 用一个例子展现闭包的基本作用。
     */

    /*计数
     doctest:
     count(1);
     >>1
     count(1);
     >>2
     count(2);
     >>3
     count(5);
     >>8
     */
    var count = (function () {
        var i = 0
        var func = function (x) {
            if (arguments[0] != null) {
                i += x;
            } else {
                i++
            }
            return i;
        }
        return func
    })();  //加这个可以直接实例化。

    /**
     * 实例化两个对象。每个对象有变量i,且不共享.私有变量
     */

    var addPrivateValue = function (o, name) {
        var value = 1;
        o['get' + name] = function () {
            return value;
        }
        o['set' + name] = function (v) {
            value = v
        }
    }

    o = Object();
    addPrivateValue(o, "s");
    o.sets("asdf");
    o.gets();

    /**
     * 避免变量污染
     *
     * 应用场景
     * 如果一个页面，有一个按钮点击切换div的显示或者隐藏. (这个div的内容也在这个方法内定义。)
     *
     */

    var main_message = (function () {
        var message = "<div>" + " 测试！这是一个警告"
        "</div>";
        var box = document.createElement("div")
        document.body.appendChild(box)
        var show = function () {
            box.style.display = '';
            console.log("hha")
        }
        var hide = function () {
            box.style.display = "None";
        }
        var obj = {}
        obj.show = show;
        obj.hide =hide;
        return obj
    })();

什么是原型对象？

var Credit = function(){
        var name;
    }
    //prototype 返回对对象的原型引用。  原型函数会先调用原来的那个方法　与继承还是有区别的。
    Credit.prototype.getName = function(){
        console.log("Credit");
        return this.name
    }
    Credit.prototype.setName = function(name){
        console.log("Credit");
        this.name = name;
    }

    var NewCredit = function(){
    }
    NewCredit.prototype.getName = function(){
        console.log("NewCredit");
        return this.name
    }
    NewCredit.prototype.setName = function(name){
        console.log("NewCredit");
        this.name = name;
    }


    NewCredit.prototype = new Credit();

    var c = new NewCredit();
    c.setName("adf");//这个会输出Credit
    c.getName();

继续理解：

原型对象实际上就是构造函数的一个实例对象，和普通的实例对象没有本质上的区别。可以包含特定类型的所有实例的共享属性或者方法。这样，如果我们需要修改所有实例中的属性或者方法，就只需要修改一处，就能够影响到所有实例了。因为原型中的属性和方法是共享的。

var Person = function(){
    this.name = arguments[0];
    this.age = arguments[1];
    if(null != arguments[2]){
        this.addr = arguments[2];
    }
    Person.prototype.addr = "默认";
    Person.prototype.hello = function(){
        console.log("my name is "+ this.name+" and I'm "+this.age+"years old and in "+this.addr+" now!");
    }
}

var p = new Person("xiaoming",17,"长沙");
var s = new Person("xiaohong",16);
p.hello();
s.hello();

// output
/*
 >>my name is xiaoming and I'm 17years old!
 >>my name is xiaohong and I'm 16years old!
 */

//现在我扩展这个方法，让Person类加入一个方法发邮件问好

Person.prototype.email = function(){
    console.log("This is a `hello` from "+this.name+"!");
}
p.email();
s.email();