在我学习过程中收集的一些常用技巧:

typeof x !== undifined 判断x是否已定义;
x === Object(x)  判断x是否为对象;
Object.keys(x).length 获取对象x所有可枚举的元素的个数;
Object.getOwnPropotyNames(x).length 获取对象x所有元素的个数;
注意:var p1 = Object.create(p);对象p1只继承了p的属性,但未继承它的属性描述符,此时p1的继承属性的描述符为空;
for in循环遍历对象的所有可枚举属性,x.hasOwnPropoty(item)判断是否是自有属性;
Object.prototype.toString.call(x).slice(8,-1) 获取对象x的类型;
str.substring(index1,index2)和str.slice(index1,index2)虽然效果一样,但最好优先使用slice方法,str.substr(index,n)也是取一段字符串但第二个参数表示取的字符个数;
!! a 或 Boolean(a) 获得一个变量a对应的布尔值;
在构造函数内实行严格模式(首行加'use strict')可避免忘记用new命令来调用构造函数而引起的未知错误,或者在构造函数内添加判断this instanceof Foo看是否能生成实例,不能则返回一个实例;
如果一个对象被freeze冻结了,那么他将不能添加、更改、删除所有属性的值,但仍然可通过在他的原型上添加属性来给他添加属性;若他的属性也是对象,则该属性指向该对象的引用不可更改,但对象本身是可以改变的;
Array.apply(null,array1)调用Array构造函数来讲数组array1中的空元素变成undefined,数组的forEach方法会跳过空元素,但是不会跳过undefined,把undefined当着值对待;
array1.forEach(callback(currentValue,index,array1),thisArg);其中可选参数thisArg指定在forEach内的this的指向;
call、apply、bind这三个方法,来切换/固定this的指向,也可用来调用对象的原生方法,如Math.max.apply(null,array1)获得数组array1的最大值;
call、apply绑定对象并指向方法,而bind仅绑定对象并返回新方法:var func2 = func1.bind(obj,x1,y1..)将方法func1绑定给obj对象,返回一个新方法并可指定预设参数值;
因为每调用bind一次就会返回一个新函数,所以应该把这个新函数赋值给一个变量后再拿来用,防止无法取消绑定!
理解this其实很简单
this的指向是动态的,它指向:this所在函数的当前运行环境对象;若要多层使用this,则最好将this赋值给一个变量来在内层中使用var that = this;
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
a.b.m(); //Hello
var hello1 = a.b.m; //此时hello实际上指代m函数本身,与a.b无关
hello1();//undefined 当前运行环境内无属性p;
var hello2 = a.b;
hello2.m(); //Hello 当前运行环境为对象b
工具函数:
一、继承与多重继承的实现
//父类1
function SuperClass1(){
this.x = arguments[0]||0;
this.y = arguments[1]||0;
}
SuperClass1.prototype.add = function(x,y){return x+y;};
SuperClass1.num1 = 0;
//父类2
function SuperClass2(){
this.a = 1;
}
SuperClass2.prototype.sum1 = function(x,y){return x+y;};
SuperClass2.prototype.sum2 = function(x,y){return x+y;};
//子类(继承自父类1,同时继承了父类2的所有实例属性/对象属性)
function Sub(){
SuperClass1.apply(this,arguments);
SuperClass2.call(this);
this.z = 0;
}
Sub.prototype = Object.create(SuperClass1.prototype);//此处若省略Object.create()则子类和父类共享一个原型
mixin(Sub.prototype,SuperClass2.prototype);
Sub.prototype.divide = function(x,y){return x-y;}; function mixin(toProto,fromProto){
for(var item in fromProto){
if(item !== 'constructor'){
toProto[item] = fromProto[item];
}
}
}
var s1 = new Sub();
console.log(s1) //Sub { x: 0, y: 0, a: 1, z: 0 }
console.log(Object.getOwnPropertyNames(s1.constructor.prototype));
//[ 'sum1', 'sum2', 'constructor', 'divide' ]
二、完整的复制对象p(含所有自有属性和继承属性)
function copyObject(p){
//获取p的继承属性
var o = Object.create(Object.getPrototypeOf(p));
//获取p的自有属性(若使用for..in遍历p,则仅获得p的可枚举属性)
Object.getOwnPropertyNames(p).forEach(function(item){
var des = Object.getOwnPropertyDescriptor(p,item);
Object.defineProperty(o,item,des);
});
return o;
}
复制任意对象(含任意可枚举属性)和Object.assign(o,p1,p2,..)一样,但assign方法兼容性差
var extend = function (o, p) {
for(var item in p){
var des = Object.getOwnPropertyDescriptor(p,item);
if(des&&(!des.writable
||!des.configurable
||!des.enumerable
||des.get
||des.set)){
Object.defineProperty(o,item,des);
}else{
o[item] = p[item];
}
}
};

JavaScript常用技巧总结(持续添加中...)的更多相关文章

  1. git常用命令(持续更新中)

    git常用命令(持续更新中) 本地仓库操作git int                                 初始化本地仓库git add .                       ...

  2. 【github&&git】4、git常用命令(持续更新中)

    git常用命令(持续更新中) 本地仓库操作git int                                 初始化本地仓库git add .                       ...

  3. 【前端】javaScript 常用技巧总结

    javaScript 常用技巧总结 1.  彻底屏蔽鼠标右键  oncontextmenu="window.event.returnValue=false" <table b ...

  4. JavaScript 使用技巧(持续更新)

    JavaScript 使用技巧(持续更新) 类型检测 使用Object.prototype.toString.call(obj)的方式. 因为无论typeof还是instanceof都无法做到精确判断 ...

  5. phpstorm 工具使用技巧(持续补充中。。。)

    phpstorm 工具使用技巧(持续补充中...) 一.phpstorm大小写切换 1.选择要转换的目标字符串: //普通商家,普通折扣默认值'COMMON_DISCOUNT'=>10.00, ...

  6. tp5 使用技巧(持续更新中...)

    tp5 使用技巧(持续更新中...) 1.自动写入时间 create_time和update_time 使用save方法才行,insert方法不生效,不知为何 2.过滤字段 allowfield和st ...

  7. git使用技巧集合(持续更新中)

    git使用技巧集合(持续更新中) 在团队协作中,git.svn等工具是非常重要的,在此只记录一些git使用过程中遇到的问题以及解决方法,并且会持续更新. 1.git commit之后,还没push,如 ...

  8. Vue开发中的常用技巧(持续更新)

    1. 监听子组件的生命周期例如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规写法可能如下: // Parent.vue <Child @m ...

  9. laravel中及其常用的一些函数方法(自己看)和技巧(不断添加中)

    手册:https://laravelacademy.org/ 1.中间件的定义Middleware 2.路由的定义和写法 3.控制器Controller之Request 4.控制器Controller ...

随机推荐

  1. Prim算法(三)之 Java详解

    前面分别通过C和C++实现了普里姆,本文介绍普里姆的Java实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http:// ...

  2. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  3. SQL Server代理(10/12):使用代理账号运行作业

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这一系列的上一篇,你查看了msdb库下用 ...

  4. [Tool] 配置文件之Web.config

    开发人员工具: 安装完vs后,(如2013:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools\Shortcuts\VS ...

  5. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

  6. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  7. 使用MVVM-Sidekick开发Universal App(一)

    终于要迈进Universal的大坑了,还有点小激动呢. CurrencyExchanger 掌中汇率是我前几年发布在Windows Phone商店中的一个应用,当时是WP7版本,下载链接:http:/ ...

  8. IN31志愿者“孝行天下,感恩父母”晚会

    IN31是一群志愿者,为社会倾力奉献与引发爱的公益组织.成功举办第一场孝行天下的大型公益活动

  9. 炉石传说 C# 开发笔记 (续)

    炉石传说山寨的工作一直在进行着,在开发过程中深深体会到,对于业务的理解和整个程序的架构的整理远比开发难得多. 在开发过程中,如果你的模型不合理,不准确,很有可能造成代码的混乱,冗余,难以维护和扩展性比 ...

  10. MySQL Workbench gnome-keyring-daemon错误的解决

    在Fedora下安装了一个MySQL Workbench,运行,连接数据库,在Store in Keychain时出现了gnome-keyring-daemon错误,不能保存密码,也就连不上数据库. ...