JavaScript随笔

• String，索引返回目标单字符

var str = "hello world";
console.log(str[1]);  //e
//下标法，从ES5开始支持，IE8+，以及其他浏览器都是支持的
console.log(str.charAt(1));  //e

• 截取字符串的3个方法

1）slice(start, [end])； //start到end，end缺省为：str.length
2）substring(start, [end])；//start到end，end缺省为：str.length
3）substr(start, [length])；//start开始截取length个字符，length缺省为: str.length

1. 参数不含负数
   slice和substring是没有区别的。
2. 参数含负数，负值的转化就各不相同：

slice：负值参数 = 负值 + str.length
substring：所有负值参数转化为 0
substr：第一个参数和slice一样，第二个参数和substring一样

var str = "hello world";
console.log(str.slice(-3));  //"rld"
console.log(str.substring(-3));  //"hello world"
console.log(str.substr(-3));  //"rld"
console.log(str.slice(3,-4));  //"lo w"
console.log(str.substring(3,-4));  //"hel"
console.log(str.substr(3,-4));  //""

• 创建对象中，构造函数、原型对象和对象实例之间的关系：

每个构造函数都会包含一个指向原型对象的指针（prototype属性），而原型对象包含一个指向构造函数的指针（constructor属性），每个实例包含一个指向原型对象的内部指针（[[prototype]]属性）

• 原型链

首先要了解上面关于创建对象中，构造函数、原型对象和对象实例的关系，原型链的构成即是，对象实例的内部指针指向原型对象，构造函数的prototype也是指向这个原型对象，然后以另外一个对象的实例作为这个原型对象（相当于用这对象实例重写了这个原型对象），而这个原型对象（对象实例）也会有一个内部指针指向上一级的原型对象，这个上一级的原型对象有个constructor指向构造函数

function SuperType(){
  this.property = true;
}
SuperType.getSuperTypeValue = function(){
  return this.property;
}
function SubType(){
  this.subProperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubTypeValue = function(){
  return this.subProperty;
}
var instance = new SubType();
console.log(instance.getSuperTypeValue());  //true

Paste_Image.png

如上面的，对象实例的内部指针指向原型对象，原型指针的内部指针再指向上一级的原型对象，这样构成的链，即为原型链。

• 函数声明提升

函数声明提升，是指在读取代码执行之前先读取函数声明。函数声明提升只对

//有效
function XXX(){}
//无效
var func = function(){};

函数表达式是没有函数声明提升

• 浅复制 和 深复制

浅复制：浅复制是复制引用，复制后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响

深复制：深复制不是简单的复制引用，而是在堆中重新分配内存，并且把源对象实例的所有属性都进行新建复制，以保证深复制的对象的引用图不包含任何原有对象或对象图上的任何对象，复制后的对象与原来的对象是完全隔离的
参考链接

• BOM：delete 删除 在全局作用域上定义的变量和在Window对象上定义的区别

var name = 'issac';
window.age = 18;
console.log(delete window.name);  //false
console.log(delete window.age);   //true

PS: delete 要在IE9+上才能使用（其他浏览器可以使用）

• location的位置操作（重定向）

location的属性表

location的属性表.png

location.assign('http://www.jianshu.com/u/73a630d398fd');
location.href = 'http://www.jianshu.com/u/73a630d398fd';
location = 'http://www.jianshu.com/u/73a630d398fd';
//这三中方式的位置操作效果是一样，第二、三行代码，其实就是变相调用assign函数。

改变location的其他属性也会产生重定向，并会在浏览器上留下记录(hash会改变当前url，会在浏览器留下记录，但是不会重新加载)

//http://www.jianshu.com/u/73a630d398fd#issac
location.hash = "#issac";

//http://www.jianshu.com/u/73a630d398fd?name=issac
location.search = "?name=issac";

//http://www.baidu.com/u/73a630d398fd
location.hostname = "www.baidu.com";

//http://www.jianshu.com/mardir/
location.pathname = "mardir";

//http://www.jianshu.com:8080/u/73a630d398fd
location.port = 8080;

关于location.reload();

location.reload();  //可能从缓存中加载
location.reload(true);  //强制从服务器中加载

• history对象

history.go(-1);  //上一页
history.go(1);  //下一页
history.go(2);  //下两页
//还可以使用
history.back();  //上一页
history.forward();  //下一页
//跳转到最近的issacer.cn?name=issac
history.go('issacer.cn?name=issac');

• jQuery的$.fn.data()

//html
<div class="data"></div>
//javascript
<script>
var arr = {a:1, b:2, c:3};
$(".data").data('data', arr);
</script>

//javascript
<script>
console.log($(".data").data("data"));  //输出 arr
</script>

又上面可以看出，这个data函数是可以将对象绑定到元素节点，这样可以免去重复的初始化，可以起到缓存的作用。

• jquery的on函数实现被摈弃的delegate功能

delegate，就好像他的意思，就是“委托”，委托的好处是，让动态插入的html元素也可以触发事件，其实delegate的原理就是讲事件绑定到父元素，然后每次点击父元素的是否，在判断用户点击的是否是我们指定的子元素，是则继续执行代码，否则，不执行。

// html
<div id="delegate">
  <button>1</button>
  <button>2</button>
</div>
// javascript，实现事件委托
$("#delegate").on("click", "button", function(){
  console.log($(this).text());
})

• 合并配置的兼容性写法

this.options = $.extend({}, Completer.DEFAULTS, $.isPlainObject(options) && options);

• keycode的兼容性获取写法

function (e){
  var keyCode = e.keyCode || e.which || e.charCode;
}

• jquery-on的对象式绑定事件

$element.attr('autocomplete', 'off').on({
  focus: $.proxy(this.enable, this),
  blur: $.proxy(this.disable, this)
});

• 移动端-监听键盘“完成”等回车键

使用keycode == 13

• 关于以下情况函数的参数传递

比如现在我有个函数，他有个参数是一个函数

var callback = function(){
}
$.Test({
  callback: callback,
  error: error
});