JavaScript-笔记2

function MyObject(){    //构造函数
//私有变量和私有函数（均无法在外部访问）
var privateVariable = 10;
function privateFunction(){
    return false;
}
//特权方法作为闭包有权访问私有变量和私有函数
this.publicMethod = function (){
privateVariable++;
return privateFunction();
};
}
用私有和特权成员，可以隐藏那些不应该被直接修改的数据，例如：
function Person(name){
this.getName = function(){
    return name;
};
this.setName = function (value) {
    name = value;
};
}
var person = new Person("Nicholas");
alert(person.getName()); //"Nicholas"
person.setName("Greg");
alert(person.getName()); //"Greg"
注：构造函数模式的缺点是针对每个实例都会创建同样一组新方法 。

var person = new Object();    // 或 var person = {};
person.name = "Nicholas";
person.age = 29;

var person = {
name : "Nicholas",
age : 29
};

var person = {
"name" : "Nicholas",
"age" : 29,
5 : true
};

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
alert(colors.toString()); // red,blue,green    默认返回以逗号拼接的字符串
alert(colors.valueOf()); // red,blue,green    返回的还是数组
alert(colors); // red,blue,green
var person1 = {
toLocaleString : function () {    //toLocalString默认与toString输出相同
return "Nikolaos";
},
toString : function() {    //重写toString函数
return "Nicholas";
}
};
var person2 = {
toLocaleString : function () {
return "Grigorios";
},
toString : function() {
return "Greg";
}
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios
也可利用Join手工构建返回的数组字符串：
   var colors = ["red", "green", "blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue
注：如果数组中的某一项的值是 null 或者 undefined，那么该值在 join()、toLocaleString()、 toString()和 valueOf()方法返回的结果中以空字符串表示。

function sum (num1, num2) {
return num1 + num2;
}
====>  等价于（除了什么时候可以通过变量访问函数这一点区别之外，函数声明与函数表达式的语法其实是等价的。 函数声明有提升，当变量初始化无提升）
var sum = function(num1, num2){
return num1 + num2;
};
每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。
一个函数可以有多个名字。
function sum(num1, num2){
return num1 + num2;
}
alert(sum(10,10)); //20
var anotherSum = sum;
alert(anotherSum(10,10)); //20
sum = null;
alert(anotherSum(10,10)); //20
函数内部属性this：
在函数内部，有两个特殊的对象： arguments 和 this。 arguments主要是保存函数参数的作用。
this引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是 window）。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"
    上面这个函数 sayColor()是在全局作用域中定义的，它引用了 this 对象。由于在调用函数之前，
this 的值并不确定，因此 this 可能会在代码执行过程中引用不同的对象。当在全局作用域中调用
sayColor()时， this 引用的是全局对象 window；换句话说，对 this.color 求值会转换成对
window.color 求值，于是结果就返回了"red"。而当把这个函数赋给对象 o 并调用 o.sayColor()
时， this 引用的是对象 o， 因此对 this.color 求值会转换成对 o.color 求值，结果就返回了"blue"。
注：函数的名字仅仅是一个包含指针的变量而已。因此，即使是在不同的环境中执行，全局的 sayColor()函数与 o.sayColor()指向的仍然是同一个函数。
 
在全局函数中， this 等于 window，而当函数被作为某个对象的方法调用时， this 等于那个对象。不过，匿名函数的执行环境具有全局性，因此其 this 对象通常指向 window。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
    return this.name;
};
}
};
alert(object.getNameFunc()()); //"The Window"（在非严格模式下）
 
函数内部属性func.inner：
    这个属性中保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为 null。
length 属性：表示函数希望接收的命名参数的个数
function sayName(name){
alert(name);
}
function sum(num1, num2){
return num1 + num2;
}
function sayHi(){
alert("hi");
}
alert(sayName.length); //1
alert(sum.length); //2
alert(sayHi.length); //0
apply()和call()方法：
    每个函数都包含两个非继承而来的方法： apply()和 call()。这两个方法的用途都是在特定的作
用域中调用函数，实际上等于设置函数体内 this 对象的值。首先， apply()方法接收两个参数：一个
是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是
arguments 对象。 
function sum(num1, num2){
    return num1 + num2;
}
function callSum1(num1, num2){
    return sum.apply(this, arguments); // 传入 arguments 对象
}
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]); // 传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20
 
    call()方法与 apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于 call()方法而言，第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用
call()方法时，传递给函数的参数必须逐个列举出来。在使用 call()方法的情况下， callSum()必须明确地传入每一个参数。结果与使用 apply()没有什么不同。至于是使用 apply()还是 call()，完全取决于你采取哪种给函数传递参数的方式最方便。如果你打算直接传入 arguments 对象，或者包含函数中先接收到的也是一个数组，那么使用 apply()肯定更方便；否则，选择 call()可能更合适。（在不给函数传递参数的情况下，使用哪个方法都无所谓。）
    事实上，传递参数并非 apply()和 call()真正的用武之地；它们真正强大的地方是能够扩充函数赖以运行的作用域。
    使用 call()（或 apply()）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。 
window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
bind()方法：这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值。例如：
window.color = "red";
 
var o = { color: "blue" };
 
function sayColor(){
 
alert(this.color);
 
}
 
var objectSayColor = sayColor.bind(o);    //将sayColor的函数别名绑定到o作用域对象.
 
objectSayColor(); //blue

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor(); //"red"

var === null

typeof(exp) == "undefined"

var str = ‘ hello workd haha‘;
var res = str.replace(/\s+/g, ‘‘)

var aa = {‘a‘: 1, ‘b‘: 2}
console.log(Object.getOwnPropertyNames(aa).length)    或 Object.keys(aa).length

            var entityGroupEle = entityRectEle.parentNode;
            var badEntityPaths = entityGroupEle.getElementsByTagName(‘path‘);
            while (badEntityPaths.length > 0) {
                entityGroupEle.removeChild(badEntityPaths[0]);
                badEntityPaths = entityGroupEle.getElementsByTagName(‘path‘);
            }    

//添加文档加载完要执行的函数
function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != ‘function‘){
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
 
//在某个dom元素后插入新元素
function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
 
//为某个dom元素添加css类
function addClass(element, value){
    if(!element.className){ //若未定义class属性
        element.className = value;
    } else{ //在已有css上添加新样式
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

将dom元素A插入到父元素为B的dom元素C前面：
B.insertBefore(A, C); //A为新插入元素，C为参照元素， B为新插入元素的父元素.  当C为null时，表示将A插入到B的最后.

element.getElementsByTagName("tagName")

方法1：
window.addEventListener(‘resize‘, resizeRender, false);
window.removeEventListener(‘resize‘, resizeRender, false);
方法2：
window.onresize = resize;
window.onresize = null;
方法3：
$(window).on(‘resize‘, resize);
$(window).unbind(‘resize‘, resize);
方法4：
$(window).resize(function () {});

var pagex = event.pageX || scroll().left + event.clientX;  
var pagey = event.pageY || scroll().top + event.clientY;  

var onMouseMove = function(evt){
                     var svgDivBox = $(‘.unlabel-text-svg-box‘)[0];
                    var dy = evt.pageY - $(svgDivBox).offset().top;
                    var dyPercentage = dy / svgDivBox.clientHeight;
                    // svgDivBox.scrollTop = dyPercentage * svgDivBox.scrollHeight    //与下者等价
                    svgDivBox.scrollTo(0, dyPercentage * svgDivBox.scrollHeight);
}

window.innerWidth（document.body.clientWidth还是包含）

document.oncontextmenu = function(){return false;}    //整个页面的默认右击事件均失效
$(document).bind("contextmenu",function(e){
          return false;
    });
推荐：
document.getElementsByClassName(‘ti-modal ti-fade ti-in‘)[0].oncontextmenu = function (e) {
                        e.preventDefault();
 };