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
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 第5章 引用类型 引用类型的值(对象)是引用类型的一个示例。在ECMAScript 中,引用类型是一种数据结构,用...
    力气强阅读 709评论 0 0
  • title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 558评论 0 2
  • 第三章 基本概念 3.1 语法 ECMAScript标识符一般采用驼峰大小写格式,也就是第一个字母小写,剩下的每个...
    小雄子阅读 526评论 0 1
  • 脱下军装做公民, 放下架子是公朴。 人生转折关键步, 谦虚谨慎脚跟固。 唱罢大风且当舞, 为民操作亦英武。 不翻当...
    北塔雪松阅读 688评论 48 66