精通JavaScipt第二版笔记——特性、函数和对象

前言：感觉这本书只有第二章 第三章有点看头

基本类型和引用类型

• 基本类型：字符串 数字 布尔值 null(待确定) undifined
• 引用类型：对象 数组

引用传递 保存的只是对象的地址
var obj = {};
var obj1 = obj;
obj.name="hey";
obj.name === obj1.name

自修改对象
var items = [1,2,3];
var items1 = items;
items.push(4);
items.length === items1.length

更改对象的引用
//将items设置为字符串数组（对象）
var items = ["one","two","three"];
var items1 = items;
items = ["new","array"];
//现在items items1指向不同的对象
//items指向 new array
//items1指向 one two three

修改对象生成一个全新对象而非自修改对象

var item="test";

var itemstr = item;
items+='ing';
console.log(item!=itemstr)

作用域

var foo = 'test';
if (true) {
    var foo = 'new test';
}
console.log(foo === 'new test');

function test() {
    var foo = 'old test';
}
test();
console.log(foo === 'new test');

function test() {
    foo = 'test';
}
test();
console.log(window.foo === 'test');

上下文

function setFoo(fooInput) {
    this.foo = fooInput
}

var foo = 5;
console.log('foo at the window level is set to'+foo);
var obj = {
    foo:10
}
console.log('foo at the obj is set to'+obj.foo)

setFoo(15);
console.log('now foo at the window level is set to'+foo);
obj.setFoo = setFoo;
obj.setFoo(20);
console.log('foo at the obj is now set to'+foo)

更改函数上下文

function changeColor(color) {
    this.style.color = color;
}
changeColor("white");
window对象没有style对象

var main = document.createElement('div');
changeColor.call(main,"black");
console.log(main.style.color)

function setBodyColor() {
    changeColor.apply(document.body,arguments);

}

setBodyColor('black');

闭包

var obj = document.getElementById("main");
obj.style.border = '1px solid red';
setTimeout(function() {
    obj.style.display="none"
},1000)

function delayedAlert(msg,time) {
    setTimeout(function({
      console.log(msg)
    ),time)
}

柯里化
function addGenerator(num) {
    return function(toAdd) {
        num+toAdd
    }
}

var addFive = addGenerato(5);
console.log(addFive(4)==9)

ID为main的元素
var obj = document.getElementById("main");
要绑定的数组
var items = ['click','keypress'];
迭代数组中的每一项
for (var i =0;i<items.length;i++) {
利用自执行的匿名函数生成作用域
    (function() {
    记住这一作用域中的值
    在该作用域中每个items的值都是唯一的，不依赖父上下文中所创建的变量
      var item = items[i];
      为元素绑定时间

      obj['on'+item] = function() {
      item指向处于for循环上下文的父变量
          console.log('thanks for your' +item)
      }
    }) ()
}

函数重载

function sendMessage(msg,obj) {
    if(arguments.length=2) {
        obj.log(msg)
    }else{
        console.log(msg)
    }
}

修改对象

如今javascript有三种方式控制某个对象能否修改，我们将按照严格程度从最低到最高一次讲解

1. Object.preventExtensions()
   
   阻止新的属性添加到对象中，当前的属性可以照用不误

创建一个新对象
var obj = {};
使用preventExtensions创建一个新对象
var obj2 = Object.preventExtensions(obj)
报错
Object.defineProperty(obj2,'greeting',{value:'hello'})

1. Object.seal()
   
   使用Object.seal()能够限制对象的能力，这类似Object.preventExtensions
   
   不过和之前的例子不同的是属性不能删除，也不能转换成存取器(accessor,getter方法)
   
   删除或添加属性同样会报错，已有的可写属性是例外

var obj={};
obj.greeting = 'welcome';
Object,seal(obj);
更新已有的可写属性
无法将已有属性转换为存储器
obj.greeting = 'hello'
Object.defineProperty(obj,'greeting',{get:function() {
    return 'hello world'
})

无法删除属性
delete.obj.greeting;

1. Object.freeze()
   
   三种方法中最为严格的方法，一旦使用对象就被默认为不可改变的了。无法再添加删除更新属性。如果本身是一个对象的话，那该对象可以更新称为浅冻结。想生成一个不可改变的对象，所有值是对象的属性必须要冻结

var obj = {
    greeting:'welcome';
    innerObj:{}
}

Object.freeze(obj)
报错
obj.greeting = 'hello';
innerObj可更新
obj.innerObj.greeting="hello"

无法将已有属性转换为存取器
Object.defineProperty(obj,'greeting',{get:function(} {
    return 'hello world'
})

试图删除属性
delete.obj.greeting
冻结内部对象
Object.freeze(obj.innerObj)
报错
obj.innerObj.greeting = 'dfsfsf';