js中的内部属性与delete操作符 在讲解Configurable之前，我们首先来看一道面试题：a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b ); // 2 从上面的这道题可以看出两个的区别：在没有使用var声明变量时，使用delete关键词是可以进行删除的，再次获取时值就是undefined了；在使用var声明的变量，使用delete是不能删除的，再获取时值依然是2。 1. delete操作符 # 使用delete删除变量或属性时，删除成功返回true，否则返回false。如上面的例子中，delete无法删除变量a时，则返回false；而delete能成功删除变量b，则返回true。除了上述的两种情况，还有其他的各种常用变量也有能被delete删除的，也有不能被删除的。我们先不管delete这些变量时，为什么会产生这样的结果，这里只看他的返回值：删除delete数组中其中的一个元素：// 使用for~in是循环不到的，直接忽略到该元素 // 使用for()可以得到该元素，但是值是undefined var arr = [1, 2, 3, 4]; console.log( arr ); // [1, 2, 3, 4] console.log( delete arr[2] ); // true，删除成功 console.log( arr ); // [1, 2, undefined, 4] 删除function类型的变量：// chrome 不能删除；火狐可以删除 function func(){ } console.log( func ); console.log( delete func ); console.log( func ); 删除function.length，该length是获取形参的个数：function func1(a, b){ } console.log( func1.length ); // 2 console.log( delete func1.length ); // true，删除成功 console.log( func1.length ); // 0 删除常用变量：console.log( delete NaN ); // false，删除失败 console.log( delete undefined );// false console.log( delete Infinity ); // false console.log( delete null ); // true，删除成功 删除prototype，而不是删除prototype上的属性：function Person(){ } Person.prototype.name = "蚊子"; console.log( delete Person.prototype ); // false，无法删除 console.log( delete Object.prototype ); // false 删除数组和字符串的length时：var arr = [1, 2, 3, 4]; console.log( arr.length ); // 4 console.log( delete arr.length ); // false，删除失败 console.log( arr.length ); // 4 var str = 'abcdefg'; console.log( str.length ); // 7 console.log( delete str.length ); // false，删除失败 console.log( str.length ); // 7 删除obj中的属性时：var obj = {name:'wenzi', age:25}; console.log( obj.name ); // wenzi console.log( delete obj.name ); // true，删除成功 console.log( obj.name ); // undefined console.log( obj ); // { age:25 } 删除实例对象中的属性时，从以下的输出结果可以看出，使用delete删除属性时，删除的仅仅是实例对象本身的属性，而不能删除prototype上的属性，即使再删一次也是删除掉不的；若要删除prototype上的属性的属性或方法，只能是：delete Person.prototype.name：function Person(){ this.name = 'wenzi'; } Person.prototype.name = '蚊子'; var student = new Person(); console.log( student.name ); // wenzi console.log( delete student.name ); // true，删除成功 console.log( student.name ); // 蚊子 console.log( delete student.name ); // true console.log( student.name ); // 蚊子 console.log( delete Person.prototype.name );// true，删除成功 console.log( student.name ); // undefined 2. js的内部属性 # 在上面的例子中，有的变量或属性能够删除成功，而有的变量或属性则无法进行删除，那是什么决定这个变量或属性能不能被删除呢。ECMA-262第5版定义了JS对象属性中特征（用于JS引擎，外部无法直接访问）。ECMAScript中有两种属性：数据属性和访问器属性。 2.1 数据属性 # 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性： configurable:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true; Enumberable:表示是否可通过for-in循环返回属性。默认true; Writable:表示是否可修改属性的值。默认true; Value:包含该属性的数据值。读取/写入都是该值。默认为undefined；如上面实例对象Person中定义了name属性，其值为’wenzi’,对该值的修改都反正在这个位置 要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。如下：var person = {}; Object.defineProperty(person, 'name', { configurable: false, // 不可删除，且不能修改为访问器属性 writable: false, // 不可修改 value: 'wenzi' // name的值为wenzi }); console.log( person.name); // wenzi console.log( delete person.name ); // false，无法删除 person.name = 'lily'; console.log( person.name ); // wenzi 可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable设置为false，则无法再使用defineProperty将其修改为true（执行会报错：Uncaught TypeError: Cannot redefine property: name）; 2.2 访问器属性 # 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征： [[Configurable]]:是否可通过delete操作符删除重新定义属性； [[Numberable]]:是否可通过for-in循环查找该属性； [[Get]]:读取属性时自动调用，默认：undefined; [[Set]]:写入属性时自动调用，默认：undefined; 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：var person = { _age: 18 }; Object.defineProperty(person, 'isAdult', { Configurable : false, get: function () { if (this._age >= 18) { return true; } else { return false; } } }); console.log( person.isAdult ); // true 不过还是有一点需要额外注意一下，Object.defineProperty()方法设置属性时，不能同时声明访问器属性（set和get）和数据属性（writable或者value）。意思就是，某个属性设置了writable或者value属性，那么这个属性就不能声明get和set了，反之亦然。如若像下面的方式进行定义，访问器属性和数据属性同时存在：var o = {}; Object.defineProperty(o, 'name', { value: 'wenzi', set: function(name) { myName = name; }, get: function() { return myName; } }); 上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下： Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value 对于数据属性，可以取得：configurable,enumberable,writable和value；对于访问器属性，可以取得：configurable,enumberable,get和set。由此我们可知：一个变量或属性是否可以被删除，是由其内部属性Configurable进行控制的，若Configurable为true，则该变量或属性可以被删除，否则不能被删除。可是我们应该怎么获取这个Configurable值呢，总不能用delete试试能不能删除吧。有办法滴！！ 2.3 获取内部属性 # ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。如：var person = {name:'wenzi'}; var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性 console.log( desp ); // {value: "wenzi", writable: true, enumerable: true, configurable: true} 通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性，configurable控制着变量或属性是否可被删除。这个例子中，person.name的configurable是true，则说明是可以被删除的：console.log( person.name ); // wenzi console.log( delete person.name ); // true，删除成功 console.log( person.name ); // undefined 我们再回到最开始的那个面试题：a = 1; var desp = Object.getOwnPropertyDescriptor(window, 'a'); console.log( desp.configurable ); // true，可以删除 var b = 2; var desp = Object.getOwnPropertyDescriptor(window, 'b'); console.log( desp.configurable ); // false，不能删除 跟我们使用delete操作删除变量时产生的结果是一样的。 3. 总结 # 别看一个简简单单的delete操作，里面其实包含了很多的原理！

angular初探 AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。跟着教程学习了几天，给我的感觉就是：不用自己再显式的用 js 给 DOM 元素绑定事件，只需添加一个 angular 特有的字段即可；像是使用后端语言那样对 DOM 进行操作，比如循环输出数组中的元素；自己写一个控制器，就能对页面进行操作。AngularJS 使用了不同的方法，它尝试去补足 HTML 本身在构建应用方面的缺陷。AngularJS 通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如： 使用双大括号语法进行数据绑定； 使用 DOM 控制结构来实现迭代或者隐藏 DOM 片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的 DOM 元素上； 能将 HTML 分组成可重用的组件。 1. AngularJS 简介 # AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令标记了 AngularJS 脚本的作用域，在中添加 ng-app 属性即说明整个都是 AngularJS 脚本作用域。开发者也可以在局部使用 ng-app 指令，如，则 AngularJS 脚本仅在该 div 中运行。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 1.1 一个简单的数据绑定 # 实时的实现输入框的值 angular 在上面的程序中，实现了在输入框中输入一个值，能马上在 p 标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量 username，ng-bind指令把应用程序变量 username 绑定到某个段落（上面的 p 标签）的 innerHTML 上。如果去掉 html 标签上的ng-app，则功能失效 1.2 一个简单的循环输出 # 在我们使用后端语言模板的时候，通常会使用循环输出一些类似的数据。angular 也有这样的功能： angular name:{{ item.name }} age:{{ item.age }} 首先我们使用ng-init初始化一组数据 data，然后使用ng-repeat对 data 进行循环输出。ng-repeat放在哪个标签上，就是对这个标签进行循环，这里循环的是 li 标签；其中的每一项就是item，然后可以通过item.name，item.age输出 name 和 age 的值。当然，还可以不使用ng-init初始化数据，直接对数组进行循环： angular name:{{ item.name }} age:{{ item.age }} 1.3 AngularJS 过滤器 # 过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器可用于转换数据： currency：格式化数字为货币格式； filter：从数组项中选择一个子集； lowercase：格式化字符串为小写； orderBy：根据某个表达式排列数组； uppercase：格式化字符串为大写 过滤器的简单使用： 大写：{{ 'wenzi'|uppercase }} 小写：{{ 'Country'|lowercase }} name:{{ item.name }} age:{{ item.age }} 1.4 控制器 # AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器： angular {{ name }} {{ age }} {{ male }} var app = angular.module('myApp', []); // 定义Person控制器 app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; }) angular 使用$scope对象来调用控制器，控制器的$scope 用来保存 angularJS model（模型）的对象。控制在作用域中创建了三个属性：name, age, male。控制器中还可以添加方法：app.controller("Person", function ($scope) { $scope.name = "wenzi"; $scope.age = 24; $scope.male = "male"; // 获取当前时间 $scope.getTime = function () { return new Date().getTime(); }; }); 1.5 HTTP # angular 中的$http是一个用于读取 web 服务器上数据的服务。$http.get(url)获取链接 url 中返回的数据： name:{{item.name}} age:{{item.age}} sex:{{item.sex}} var app = angular.module("myApp", []); // $http的用法跟$.ajax用法很相似 app.controller("getJson", function ($scope, $http) { $http.get("./interface.php").success(function (data) { $scope.result = data; }); }); 2. 为 DOM 添加属性 # angular 能通过ng-*为 DOM 添加属性，如： 指令值说明 ng-disabledboolean添加disabled属性 ng-showboolean显示HTML元素 ng-hideboolean隐藏HTML元素 ng-click定义angular点击事件 如下面的代码简单的介绍了这些指令的使用：点击 要隐藏的元素 现在我们来写个稍微有点复杂的程序： {{ count }} 点击+1 隐藏|显示 {{ count }} var app = angular.module("myApp", []); app.controller("toggleController", function ($scope) { $scope.myVar = false; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); 3. 一个 angular 应用 # 学了一些东西，让我们来写一个小的 web 应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】： angular 我的笔记 保存 清除 剩余字数：100 var app = angular.module('myApp', []); app.controller('textController', function($scope){ $scope.message = ''; $scope.save = function(){ alert( $scope.message ); } $scope.left = function(){ return 100 - $scope.message.length; } $scope.reset = function(){ $scope.message = ''; } })

javascript如何添加前置0 JavaScript 中的数字是没有前置 0 的，因此需要我们自己进行操作来添加前置 0，而且还得转换成字符串。假如生成一个是一共是 4 位的有前置 0 的数据，通常我们能想到的方法是这样子的：function addPreZero(num) { if (num < 10) { return '000' + num; } if (num < 100) { return '00' + num; } if (num < 1000) { return '0' + num; } return num; } 这种方式的思路比较简单，根据当前数据的位数来补充相应个数的前置 0；不过这样的算法写起来比较麻烦，如果需要的前置 0 非常多的话，那么得写很多的if...else。还是基于这种思路，我们可以先算出这个数字有多少位，然后直接补上相应的 0 就行了：function addPreZero(num) { var t = (num + '').length, s = ''; for (var i = 0; i < 4 - t; i++) { s += '0'; } return s + num; } 这种方式的实现，是根据当前 num 的位数，来计算出所有的前置 0，然后再拼接上 num。在这个基础上，我们还可以这样考虑：比如需要一共是 10 位的有前置 0 的数据，那么首先不管当前数字是多少位的，都先补上 9 个前置 0，然后再截取这个字符串最后的 10 位，那么获取到的就是需要的数据：function addPreZero(num) { return ('000000000' + num).slice(-10); } 2022 年 6 月更新：在 ECMAScript 2017 中，字符串中新增了padStart和padEnd 两个方法，用来给字符串添加前置字符串和后置字符串。const num = 123; num.toString().padStart(10, '0'); // '0000000123' 第 1 个参数表示目标字符串的长度，若设定的长度小于当前字符串的长度，则原样返回；否则，就用第 2 个参数里的字符串进行重复填充，直到满足设定长度。实现想要的结果很多的方法，我们应该尽可能的想出更多的方法，一方面能够拓展我们的思维，另一方面也能让我们选择出更好的方式。

jquery如何禁止外层滚动条的滚动 通常情况下，当内部滚动条滚动到两端时，再接着滚动时外层的滚动条就会跟着滚动；可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。在jquery中，滚动事件是scroll，而这个事件是不能阻止冒泡和阻止默认事件的。假如我们设定要禁止window的滚动条，我采取的策略是：当鼠标进入到当前区域后，则window的滚动条的高度始终是鼠标进入前的高度，如下的代码：.main{ overflow: auto; width: 400px; height: 400px; border: 1px solid #aaa; } .main p{ height: 800px; } $(function () { var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度 $('#main').hover(function(){ scrollTop = $(window).scrollTop(); }, function(){ scrollTop = -1; }); // 鼠标进入到区域后，则强制window滚动条的高度 $(window).scroll(function(){ scrollTop!==-1 && $(this).scrollTop(scrollTop); }) }) 从上面的代码可以看到，我并没有阻止window滚动条的事件，而是用户每次滚动时，都会重新进行赋值。当然，或许还有更好的方法，欢迎大家提供，谢谢！

img图片与容器下边界的缝隙的解决方式 今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案。通常在img图片的父级容器是块级元素时，就会造成如下的现象：.css_img_main{border: 1px solid #f00; width: 475px;} 我们看到图片的下边界与div中间有个小的缝隙，那么我们就得需要解决这个问题。如果不解决这个问题的话，那底部有个遮罩的话，那也就不能跟图片的下边界对齐了。 这里简单的介绍3个解决方案： 1. 给图片添加vertical-align属性 # .main img{ vertical-align : bottom; // top, middle } 只要vertical-align的值是以上三个中任意的一个，就能解决缝隙的问题。 2. 定义容器里的字体大小为0 # .main{ font-size : 0; } 这样也可以解决缝隙的问题。 3. 把图片设置为块级元素 # .main img{ display : block; } 据说，图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。