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

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. 云计算之路-阿里云上:消灭“黑色n秒”第三招——禁用网卡的TCP/IP Offload

    程咬金有三板斧,我们有三招.在这篇博文中我们要出第三招,同时也意味着昨天在“希望的田野”上的第二招失败了. 前两招打头(CPU)不凑效,这一招要换一个部位,但依然要坚持攻击敌人最弱(最忙最累)部位的原 ...

  2. PHP 自制日历

    最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示.如下图所示: 一.计算数据 1.new一个Calendar类 2.初始化两个下 ...

  3. Javascript定时器(一)——单线程

    一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type=&quo ...

  4. Java面试题技术类一

    1.面向对象编程的三大特性是什么? (1).继承: 继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法.对象的一个新类可以从现有的类中派生,这个过程称为类继承.新类继 ...

  5. js让程序暂停一段时间再执行

    function sleep(d){ for(var t = Date.now();Date.now() - t <= d;); } sleep(5000); //当前方法暂停5秒

  6. 开发人员看测试之细说JBehave

    上篇我们说到如何从Github上clone出一个JBehave项目,既是为了学习JBehava,也是为了熟悉下Github.从clone下来的项目看来,基本没什么问题,稍微捋一捋就可以运行,但是就cl ...

  7. 转 Windows+VS2013爆详细Caffe编译安装教程

    1. 安装cuda Cuda是英伟达推出的GPU加速运算平台 我这里安装的是cuda7.5,已经安装过的忽略,还没有安装过的这里有安装教程.windows下面安装还是非常简单的. 点击打开链接    ...

  8. Javascript动画效果(四)

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

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

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

  10. SQL--视图