[关闭]
@windchimes 2018-02-28T07:45:55.000000Z 字数 5142 阅读 251

开发小笔记

小知识点

instanceof 判断类型

  1. let obj = $('');
  2. if (obj instanceof jQuery) {console.log('jQuery')}else {dom}

Function function
function是Function的一个实例，Function是构造函数，是个类
function = new Function(arg1,arg2,...argN,function)

{} []的布尔值都是true，而‘’的空字符串是fasle
== === 两个等号进行类型转换，string=>number boolean=>number
NaN不和任何一个相等,全等更不相等
null == undefined //true
null === undefined //false

数组方法splice
形成新的数组，接收3个参数，index,length,item

定时闹钟多个地方调用时，每次调用前一定要清除一遍，否则会乱掉

IE用attachEvent 只支持事件冒泡.冒泡的终点是window对象，IE8除外
W3C用addEventListener('click',function(){},true)，三个参数，true捕获，false冒泡

map方法
不改变原数组，生成新的数组，接收3个参数，分别是currentvalue index array, 操作的值、索引、原数组

  1. var kvArray = [{key: 1, value: 10}, 
  2.                {key: 2, value: 20}, 
  3.                {key: 3, value: 30}];
  5. var reformattedArray = kvArray.map(function(obj) { 
  6.    var rObj = {};
  7.    rObj[obj.key] = obj.value;
  8.    return rObj;
  9. });

[{1:10},{2:20},{3:30}]

函数声明会覆盖变量声明，但不会覆盖变量赋值。
var a = 1; function a() { return true; } console.log(a); //1
var a; function a() { return true; } console.log(a); // function

很不错的js面试题
https://zhuanlan.zhihu.com/p/28428367

js继承：
原型链继承
构造器函数继承
组合继承
寄生组合继承
讲解链接：http://www.cnblogs.com/ayqy/p/4471638.html
原型链继承
注意：1）不能使用对象字面量创建原型方法，因为这样会创建出一个object的实例，而不是原型的实例，例如Cat中不能这么写：

  1. Cat.prototype = {
  2.     getName: function() {}
  3. } //错误

2）引用类型的原型属性会被所有的实例共享，一旦某个实例更改了引用类型的属性，则全部实例的属性值都会被改变

  1. function Animal(name,food) {
  2.     this.name = name;
  3.     this.food = food;
  4.     this.eat = function () {
  5.         console.log(this.name + '喜欢吃' + this.food)
  6.     }
  7. }
  8. function Cat(){ }
  9. Cat.prototype = new Animal('猫','小鱼干');
  10. var cat = new Cat();
  11. cat.eat();

构造器继承

  1. function Animal(name,food) {
  2.     this.name = name;
  3.     this.food = food;
  4.     this.eat = function() {
  5.         console.log(this.name + '爱吃' +this.food)
  6.     }
  7. }
  8. function Cat(name,food){
  9.     Animal.call(this,name,food);
  10. }
  11. var cat = new Cat('猫','大鱼干')
  12. cat.eat();

组合继承

  1. function Animal(name,food) {
  2.     this.name = name;
  3.     this.food = food;
  4.     this.eat = function() {
  5.         console.log(this.name + '爱吃' +this.food)
  6.     }
  7. }
  8. function Cat(name,food){
  9.     Animal.call(this,name,food);
  10. }
  11. Cat.prototype = new Animal();
  12. var cat = new Cat('猫','大鱼干')
  13. cat.eat();

寄生组合继承

  1. // 切掉了原型对象上多余的那份父类实例属性
  2. function beget(obj) {
  3.     var F = function () {};
  4.     F.prototype = obj;
  5.     return new F();
  6. }
  7. function Super(){
  8.     // 只在此处声明基本属性和引用属性
  9.     this.val = 1;
  10.     this.arr = [1];
  11. }
  12. //  在此处声明函数
  13. Super.prototype.fun1 = function(){};
  14. Super.prototype.fun2 = function(){};
  15. //Super.prototype.fun3...
  16. function Sub(){
  17.     Super.call(this);   // 核心
  18.     // ...
  19. }
  20. var pro = beget(Super.prototype);
  21. pro.constructor = Sub;
  22. Sub.prototype = pro;

取出字符串中重复次数最多的字符和重复次数
思路：1）json对象，遍历字符串，不同的字符串放入json中不同的数组，找出长度最长的数组就ok
2）新建json对象，不重复为1，重复则++，最后拿出json里value最大的值，value是次数，对应的key就是那个重复次数最多的字符
3）正则表达式 /(\w)\1+/g

  1. let str = 'dafsdfasfaeagsdfasfawefasdfas',
  2.     json = {},
  3.     i = 0,
  4.     max = 0,
  5.     val = '';
  6. for (; i < str.length; i++) {
  7.     let key = str[i];
  8.     if (!json[key]) {
  9.         json[key] = 1;
  10.     } else {
  11.         json[key]++;
  12.     }
  13. }
  14. console.log(json);
  15. for (var key in json) {
  16.     if (json[key] > max) {
  17.         max = json[key];
  18.         val = key;
  19.     } 
  20. }
  21. console.log(max);
  22. console.log(val);

实现类似getElementsByClassName的功能

  1. function queryClassName(node, name) {  
  2.   var starts = '(^|[ \n\r\t\f])', //空格字符 |或
  3.        ends = '([ \n\r\t\f]|$)';
  4.   var array = [],
  5.         regex = new RegExp(starts + name + ends),
  6.         elements = node.getElementsByTagName("*"),
  7.         length = elements.length,
  8.         i = 0,
  9.         element;
  11.     while (i < length) {
  12.         element = elements[i];
  13.         if (regex.test(element.className)) {
  14.             array.push(element);
  15.         }
  17.         i += 1;
  18.     }

深拷贝与浅拷贝
jQuery.extend可以实现深拷贝
JSON.parse(JSON.stringify())
JSON.parse()和JSON.stringify()能正确处理的对象只有Number、String、Array等能够被json表示的数据结构，因此函数这种不能被json表示的类型将不能被正确处理

  1. var target = {a: 1, b: 1, c: {ca: 11, cb: 12, cc: 13}};
  2. var targetCopy = JSON.parse(JSON.stringify(target));
  3. targetCopy.a = 2;
  4. targetCopy.c.ca = 21;
  5. console.log(target);   // {a: 1, b: 1, c: {ca: 11, cb: 12, cc: 13}}
  6. console.log(targetCopy);    // {a: 2, b: 1, c: {ca: 21, cb: 12, cc: 13}}
  7. console.log(target === targetCopy);  // false

animation transfrom transition区别
animation：动画效果，不需要触发，可以直接在css中执行
transform: 静态效果，指定形状之类的 transform: scale(1,1);
transition: 需要特定的触发事件，只有开始和结束两个状态
animate：jquery方法，兼容性较好，animate(css,speed,callback)
其中css需要具体的数值，比如margin-top:20px

this 讲解：http://web.jobbole.com/85198/

  1. var o = {
  2.     a:10,
  3.     b:{
  4.         a:12,
  5.         fn:function(){
  6.             console.log(this.a); //undefined
  7.             console.log(this); //window
  8.         }
  9.     }
  10. }
  11. var j = o.b.fn;
  12. j();

this指向的永远是最后调用它的对象，也就是看它执行的时候是谁来调用的，虽然fn是被b所引用，但是最后执行的时候是window，所以undefined
this和return共用时要注意：return时是对象则为undefined，因为此时this指向的是那个返回的空对象，如果返回值不是对象那么this还是指向函数的实例

  1. function fn()  
  2. {  
  3.     this.user = '追梦子';  
  4.     return {};  
  5. }
  6. var a = new fn;  
  7. console.log(a.user); //undefined
  9. function fn()  
  10. {  
  11.     this.user = '追梦子';  
  12.     return function(){};
  13. }
  14. var a = new fn;  
  15. console.log(a.user); //undefined
  17. function fn()  
  18. {  
  19.     this.user = '追梦子';  
  20.     return 1;
  21. }
  22. var a = new fn;  
  23. console.log(a.user); //追梦子
  25. function fn()  
  26. {  
  27.     this.user = '追梦子';  
  28.     return undefined;
  29. }
  30. var a = new fn;  
  31. console.log(a.user); //追梦子
  33. function fn()  
  34. {  
  35.     this.user = '追梦子';  
  36.     return null;
  37. }
  38. var a = new fn;  
  39. console.log(a.user); //追梦子

location.reload()重新加载页面所有资源，不读取缓存 location.href()会读取本地的存储资源

  1.  function Foo() {
  2.       getName = function () {
  3.         alert(1);
  4.       };
  5.       return this;
  6.     }
  7.     Foo.getName = function () {
  8.       alert(2);
  9.     };
  10.     Foo.prototype.getName = function () {
  11.       alert(3);
  12.     }
  13.     var getName = function () {
  14.       alert(4);
  15.     };
  16.     function getName() {
  17.       alert(5);
  18.     }
  20.     Foo.getName();  // 2
  21.     getName();  // 4
  22.     Foo().getName(); // 1
  23.     getName(); // 1
  24.     new Foo.getName(); // 2
  25.     new Foo().getName(); // 3
  26.     new new Foo().getName(); // 3

教程讲解：https://www.cnblogs.com/xxcanghai/p/5189353.html

proto prototype
每个对象都会有proto来标识自己所继承的原型，可是只有构造函数才有prototype属性
当一个函数变成构造函数的时候，它的prototype指针指向的是原型对象
实例对象的proto指向了原型对象
var cat = new Cat();
cat是Cat的一个实例对象，
cat.proto == Cat.prototype;
Cat new一个实例的时候，就变成了构造函数，此时Cat拥有了prototype属性，cat拥有了proto属性，cat是Cat的一个实例
http://yijiebuyi.com/blog/7193e9e04fa01c4d7c05ec5b29494d9d.html

Image缓存图像原理：Image()构造函数会创建一个屏幕外图片对象，之后将该对象的src属性指向期望的url，由于图片元素并没有添加到文档中所以是不可见的，但是实际浏览器已经将其加载完成并缓存起来
error是不能冒泡的，但是可以被捕获，使用addEventListener(true)事件

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注