JS高级教程总结

constructor:保存用于创建当前对象的函数（构造函数即Object）
hasOwnProperty():检查给定的属性是否在当前对象实例中
isPrototypeOf():检查传入的对象是否是传入对象的原型
propertyIsEnumerable():是否可通过for-in枚举
toLocalString():返回对象字符串表示（与本区对应）
toString():返回对象字符串表示
valueOf():返回对象的字符串，数值或者布尔值表示。同toString

function add(n){
return n+100
}
function add(n){
return n+200
}//覆盖掉上一个
var result=add(100);//300

function setName(obj){
    obj.name='yl';
    obj={};
    obj.name='hello'
} 
var p={};
setName(p);
p.name;
//'yl'

var add = function (n) {
    return n+100
};

add = function(n){
    return n+200
}
//覆盖上个

var obj=new Object('hello');
obj instanceOf String;
//true

var a=new Boolean(true)
undefined
a
Boolean {[[PrimitiveValue]]: true}
a.toString()
"true"
a.valueOf()
true

isNaN()
isFinite()
parseInt()
parseFloat()
encodeURI()
encodeURIComponent()
eval()
window
Math（min(),max(),ceil(),floor(),random()）

var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
    
book.year = 2005;
alert(book.edition);   //2

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value);          //2004
alert(descriptor.configurable);   //false
alert(typeof descriptor.get);     //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value);          //undefined
alert(descriptor.enumerable);     //false
alert(typeof descriptor.get);     //"function"

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };    
    return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
person1.sayName();   //"Nicholas"
person2.sayName();   //"Greg"

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };    
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName();   //"Nicholas"
person2.sayName();   //"Greg"
alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true
alert(person1.constructor == Person);  //true
alert(person2.constructor == Person);  //true
alert(person1.sayName == person2.sayName);  //false   

this.sayName=new Function('alert(this.name)');//与声明函数逻辑上等价
person1.sayName===person2.sayName;//false
//优化，但此时全局函数有些名不副实
this.sayName=sayName;
function sayName(){}

//原型模式案例
function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();   //"Nicholas"

var person2 = new Person();
person2.sayName();   //"Nicholas"

alert(person1.sayName == person2.sayName);  //true

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

//only works if Object.getPrototypeOf() is available
if (Object.getPrototypeOf){
    alert(Object.getPrototypeOf(person1) == Person.prototype);  //true
    alert(Object.getPrototypeOf(person1).name);  //"Nicholas"
}
//虽然可以通过实例访问原型中的值，但不能通过对象实例重写原型中的值。只是‘屏蔽’
person1.name = "Greg";
alert(person1.name);   //"Greg" – from instance
alert(person2.name);   //"Nicholas" – from prototype
//使用delete操作符完全可以删除该属性
delete person1.name;
alert(person1.name);   //"Nicholas" - from the prototype
//hasOwnProperty（）,in操作符结合
function hasPrototypeProperty(object,name){return !object.hasOwnProperty(name)&&(name in object)}
//ES5中的Object.keys()方法用于取得对象上所有可枚举的对象属性，接收一个对象为参数返回一个包含所有可枚举属性的字符串数组
var keys=Object.keys(Person.prototype)
//简化的原型语法,对象字面量形式创建的对象，但此时constructor不再指向Person了
//此种写法本质上重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object）
Person.prototype={
constructor:Person,//加上此句话重设constructor，此举导致constructor的[[Enumerable]]被设置为true，默认false
    name:'Tom',
    age:'18',
    say:function(){}
}
//要消除此bug还需要再加这句话
Object.defineProperty(Person.prptotype,'constructor',{
enumerable:false,
value:Person
})
//原生对象的原型
Array.prototype===[].__proto__
String.prototype===''.__proto__
Object.prototype==={}.__proto__
//此方法困境
Person.prototype = {
        constructor: Person,
        name : "Nicholas",
        age : 29,
        job : "Software Engineer",
        friends : ["Shelby", "Court"],
        sayName : function () {
            alert(this.name);
        }
    };
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court,Van"
alert(person1.friends === person2.friends);  //true

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
}
Person.prototype = {
    constructor: Person,
    sayName : function () {
        alert(this.name);
    }
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends);    //"Shelby,Court,Van"
alert(person2.friends);    //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

function Person(name, age, job){    
    //properties
    this.name = name;
    this.age = age;
    this.job = job;
    
    //methods
    if (typeof this.sayName != "function"){
    
        Person.prototype.sayName = function(){
            alert(this.name);
        };
        
    }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

function SpecialArray(){       
    //create the array
    var values = new Array();
    
    //add the values
    values.push.apply(values, arguments);
    
    //assign the method
    values.toPipedString = function(){
        return this.join("|");
    };
    
    //return it
    return values;        
}

var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
alert(colors instanceof SpecialArray);

function Person(name,age,job){
var o=new Object;
o.sayName=function(){alert(name)}
return o
}
var p1=new Person('yl',26,'software engineer');
p1.sayName();//'yl'

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

alert(instance instanceof Object);      //true
alert(instance instanceof SuperType);   //true
alert(instance instanceof SubType);     //true

alert(Object.prototype.isPrototypeOf(instance));    //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance));   //true

function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){  
    //inherit from SuperType
    SuperType.call(this);
}
//传递参数
    function SubType(){  
            //inherit from SuperType passing in an argument
            SuperType.call(this, "Nicholas");
            
            //instance property
            this.age = 29;
        }

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);    //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors);    //"red,blue,green"

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){  
    SuperType.call(this, name);
    
    this.age = age;
}

SubType.prototype = new SuperType();

SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);  //"red,blue,green,black"
instance1.sayName();      //"Nicholas";
instance1.sayAge();       //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);   //create object
    prototype.constructor = subType;               //augment object
    subType.prototype = prototype;                 //assign object
}
                        
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){  
    SuperType.call(this, name);
    
    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);  //"red,blue,green,black"
instance1.sayName();      //"Nicholas";
instance1.sayAge();       //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27

function factorial(num){
    if (num <= 1){
        return 1;
    } else {
        //return num*factorial(num-1)
        return num * arguments.callee(num-1);
    }
}
var anotherFactorial = factorial;
factorial = null;
//alert(anotherFactorial(4));  //error
alert(anotherFactorial(4));  //24
// //严格模式下debug---使用命名函数表达式
var factorial=(function f(num){
if(num<-1){return 1}
else{return num*f(num-1)}
})

function createFunctions(){
        var result = new Array();
        for (var i=0; i < 10; i++){
            result[i] = function(){
                return i;
            };
        }
        return result;
    }
var funcs = createFunctions();
    //every function outputs 10
    //原因：每个函数作用域链中都保存着createFunctions()函数的活动对象，它们引用的是
    同一个变量i。当createFunction（）函数返回后，i都是10.
    for (var i=0; i < funcs.length; i++){
        document.write(funcs[i]() + "<br />");
    }
//解决方案如下：创建一个匿名函数强制让闭包行为符合预期（函数参数是按值传递的）
for (var i=0; i < 10; i++){
                    result[i] = function(num){
                        return function(){
                            return num;
                        };
                    }(i);
                }
//或者用ES6语法变var i为let i

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        //var that=this;
        return function(){
            return this.name;
            //return that.name;
        };
    }
};
alert(object.getNameFunc()());  //"The Window"
//细微变化可能改变this
var name='window';
var obj={name:'obj',getName:function(){return this.name}}
obj.getName();//'obj'
(obj.getName)();//'obj'
(obj.getName=obj.getName)();//'window',this得不到维持

function assignHandler(){
    var ele=document.getElementById('xx');
    var id=ele.id;//抽出闭包中循环引用的变量
    ele.onclick=function(){}
    ele=null;//清除对dom对象的引用
}

(function(){//block scope})();
var someFunction=function(){//block scope}
function(){//block scope}();//error ,函数声明不能跟（），js将function当作函数声明的开始

//模式一：在构造函数中定义特权方法，将特权方法作为闭包（有权访问在构造函数中的所有属性和方法）
function MyObject(){
    //私有变量和私有函数
    var privateVariable=10;
    function privateFunction(){
        return false;
    }
    //特权方法
    this.publicMethod=functionn(){
        privateVariable++;
        return privateFunciton();
    }
}
// 使用静态私有变量
(function(){
    var name = "";
    Person = function(value){                
        name = value;                
    };
    Person.prototype.getName = function(){
        return name;
    };
    Person.prototype.setName = function (value){
        name = value;
    };
})();
var person1 = new Person("Nicholas");
alert(person1.getName());   //"Nicholas"
person1.setName("Greg");
alert(person1.getName());   //"Greg"
var person2 = new Person("Michael");
alert(person1.getName());   //"Michael"
alert(person2.getName());   //"Michael"

function BaseComponent(){
}

function OtherComponent(){
}

var application = function(){

//private variables and functions
var components = new Array();

//initialization
components.push(new BaseComponent());

//public interface
return {
getComponentCount : function(){
return components.length;
},

registerComponent : function(component){
if (typeof component == "object"){
    components.push(component);
}
}
};
}();

application.registerComponent(new OtherComponent());
//增强的模块模式
function BaseComponent(){
}

function OtherComponent(){
}

var application = function(){

    //private variables and functions
    var components = new Array();

    //initialization
    components.push(new BaseComponent());

    //create a local copy of application
    var app = new BaseComponent();

    //public interface
    app.getComponentCount = function(){
        return components.length;
    };

    app.registerComponent = function(component){
        if (typeof component == "object"){
            components.push(component);
        }
    };

    //return it
    return app;
}();
alert(application instanceof BaseComponent);
application.registerComponent(new OtherComponent());
alert(application.getComponentCount());  //2

window.open();
// 接收四个参数：URL，窗口目标，一个特性字符串，布尔值

window.location===document.location

var btn=document.getElementById('my-button');
btn.focus();
document.hasFocus();//true
//通过检查文档是否活得了焦点来判断用户是否在与页面交互

alert(document.compatMode=='CSS1Compat'?'Standards Mode':'Quicks Mode')

var head=document.head||document.getElementsByTagName('head'[0])

document.charset;//UTF-8

document.querySelector('div').innerHTML='<script defer>console.log("hi")</script>'

var btn=document.getElementById('xx');
btn.onclick=functin(){}；
btn.onclick=null;//删除事件处理程序

btn.addEventListener('click',function(){
},false);

btn.removeEventListener('click',function(){
},false);

btn.attach('onclick',function(){});
btn.detach('onclick',function(){});

btn.onclick=function(event){alert(event.type)}
btn.addEventListener('click',function(event){alert(event.type)}
//stopPropagation用于阻止事件在DOM上传播（捕获或冒泡）
var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert("Clicked");
            event.stopPropagation();
        };
        
        document.body.onclick = function(event){
            alert("Body clicked");
        };

(function(){
    var list = document.getElementById("myLinks");
    EventUtil.addHandler(list, "click", function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        switch(target.id){
            case "doSomething":
                document.title = "I changed the document's title";
                break;
    
            case "goSomewhere":
                location.href = "http://www.wrox.com";
                break;
    
            case "sayHi":
                alert("hi");
                break;
        }
    });
})();
btn.onclick=function(){
    //过河
    btn.onclick=null;//拆桥
    //...
}

(function(){
    var btn = document.getElementById("myBtn");
    var btn2 = document.getElementById("myBtn2");
    
    EventUtil.addHandler(btn, "click", function(event){
        alert("Clicked!");
        alert(event.screenX);   //100
    });

    EventUtil.addHandler(btn2, "click", function(event){
        //create event object
        var event = document.createEvent("MouseEvents");
        //initialize the event object
        event.initMouseEvent("click", true, true, document.defaultView, 0, 100, 0, 0, 0, false, 
                                false, false, false, 0, btn2);
        //fire the event
        btn.dispatchEvent(event);
    });
})();

<body>
<form method="post" action="http://www.nczonline.net">
    <p>Enter your telephone number:</p>
    <input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" >
    <input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" >
    <input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" >

    <input type="submit" value="Submit">
</form>
<script type="text/javascript">
(function(){

function tabForward(event){            
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    
    if (target.value.length == target.maxLength){
        var form = target.form;
        
        for (var i=0, len=form.elements.length; i < len; i++) {
            if (form.elements[i] == target) {
                if (form.elements[i+1]){
                    form.elements[i+1].focus();
                }
                return;
            }
        }
    }
}
                
var textbox1 = document.getElementById("txtTel1"),
    textbox2 = document.getElementById("txtTel2"),
    textbox3 = document.getElementById("txtTel3");

EventUtil.addHandler(textbox1, "keyup", tabForward);        
EventUtil.addHandler(textbox2, "keyup", tabForward);        
EventUtil.addHandler(textbox3, "keyup", tabForward);        
        
})();
</script>

function serialize(form){        
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    
    for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
    
        switch(field.type){
            case "select-one":
            case "select-multiple":
            
                if (field.name.length){
                    for (j=0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if (option.selected){
                            optValue = "";
                            if (option.hasAttribute){
                                optValue = (option.hasAttribute("value") ? option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;
                
            case undefined:     //fieldset
            case "file":        //file input
            case "submit":      //submit button
            case "reset":       //reset button
            case "button":      //custom button
                break;
                
            case "radio":       //radio button
            case "checkbox":    //checkbox
                if (!field.checked){
                    break;
                }
                /* falls through */
                            
            default:
                //don't include form fields without names
                if (field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    }        
    return parts.join("&");
}

var btn = document.getElementById("serialize-btn");
EventUtil.addHandler(btn, "click", function(event){
    var form = document.forms[0];
    alert(serialize(form));
});

JSON.parse();
JSON.stringify();
toJSON();
var book = {
    title: "Professional JavaScript",
    authors: [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011,
    toJSON: function(){
        return this.title;
    }
   };
    var jsonText = JSON.stringify(book, ["title", "edition"]);
            var jsonText = JSON.stringify(book, function(key, value){
                switch(key){
                    case "authors":
                        return value.join(",")
                     
                    case "year":
                        return 5000;
                        
                    case "edition":
                        return undefined;
                        
                    default:
                        return value;
                }
            });
    var jsonText=JSON.stringify(book,null,4);
//toJSON()作为函数过滤器的补充，把一个对象传给JSON.stringify()，序列化顺序如下：
//1. (存在toJSON)?调用该方法:返回对象本身；
// 2.若提供了第二个参数则应用该函数过滤器（传入步骤1的值）
//3.对上一步返回的每一个值序列化
//4. 若传入了第三个参数则执行相应格式化
 var book = {
        "title": "Professional JavaScript",
        "authors": [
            "Nicholas C. Zakas"
        ],
        edition: 3,
        year: 2011,
        releaseDate: new Date(2011, 11, 1)
    };
var jsonText = JSON.stringify(book);
//{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,"year":2011,"releaseDate":"2011-11-30T16:00:00.000Z"}
var bookCopy = JSON.parse(jsonText, function(key, value){
    if (key == "releaseDate"){
        //return undefined;
        return new Date(value);
    } else {
        return value;
    }
});
console.log("releaseDate" in bookCopy);
console.log(bookCopy.releaseDate.getFullYear());//2011

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                            "MSXML2.XMLHttp"],
                i, len;
    
            for (i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex){
                    //skip
                }
            }
        }
    
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}
//如果XHR对象存在就可以写下边代码了
var xhr = createXHR();
//URL是相对执行代码的当前页面，open方法并非真正发送请求而是启动一个备发送的请求
xhr.open("get", "example.txt", false);
//send()接收一个参数作为请求主题发送数据，颥不需要发送则必须传入null
//responseText:作为响应主题被返回的文本
//responseXML:如响应内容类型是'text/xml'或'application/xml'该属性将保存包含着相应数据
的XML DOM文档
//status:响应的http状态
//statusText：http状态说明
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.statusText);
    alert(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

function validateValue(value){
    value=5*parseInt(value);
    if(value>10){
        //
    }
}
function handleKeyPress(){
    event=EventUtil.getEvent(event);
    if(event.keyCode==13){
        //
    }
}

function sum(n1,n2=0){
    return n1+n2;
}

class Person {
    constructor(name,age){
        public name=name;
        //public age=age;
        private age=age;
        get title(){
            return innerTitle=''
        }
        set title(value){
            innerTitle=value;
        }
    }
    sayName(){
        alert(this.name)
    }
    getOlder(years){
        alert(this.age+=years)
    }
}