• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

javascript我走过的坑 技术积累记录之上篇

JavaScript web前端中文站 1年前 (2018-07-18) 664次浏览 已收录 0个评论

在身边的朋友,有一些是刚踏入攻城狮行业,第一次接触的就是前端;有一些是从嵌入式应用软件转行到 web 前端开发,或是从嵌入式底层驱动转入;更常见的还有从后端转前端,等等。无论是从哪里进来的前端,都是从入门、基础学起,从前端三法宝(JavaScript,CSS,HTML)。在这里,给大家分享下“javascript 我走过的坑?”,因为篇幅较长,分两篇来总结分享。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

1、六种数据类型

Int,String,Object,Undefined,Arry,Bool

2、隐式转换

巧用+/-规则转换类型:

Num-0 转换成数字 Num+”” 转换成字符串

类型不同,尝试类型转换和比较(a == b):

“1.23” == 1.23

0 == false

Null == undefined

new Object() == new Object()

[1,2] == [1,2]

a ===?b :类型不同:

返回 false

类型相同:

null === null

Undefined === undefined

NaN ≠NaN

new?Object ≠new Object

3、包装对象

Javascript 会将基础类型 string num Boolean 临时转化为相对应的类对象,可以操作属性,比如 str.length,也可以赋值,但是调用结束之后,相应的类对象就消失了,比如 str.t=4,alert(str.4)却为 undefined。

4、类型检测

typeof 判断基本类型和函数对象,遇到 null 失效

Instanceof 适合自定义对象,也可以用来检测原生对象,不同 window 或 iframe 间的对象类型检测不能使

   Object.prototype.toString //适合内置对象和基元类型
   Constructor
   duck type
   typeof null === “object”
   //左边的左操作数对象的原型链上是否有右边构造函数的 prototype 属性。
   obj instanceof Object:
   Object.prototype.toString.apply([]); === "[object Array]";
   Object.prototype.toString.apply(function(){}); === "[object Function]";
   Object.prototype.toString.apply(null); === "[object Null]";
   Object.prototype.toString.apply(undefined); === "[object Undefined]";
   //www.lisa33xiaoq.net
   IE6/7/8   Object.prototype.toString.apply(null); === "[object Object]";

5、表达式

表达式是一种 JS 短语,可使 JS 解释器用来产生一个值。——《JS 权威指南》

原始表达式
初始化表达式
函数表达
属性访问表达式
调用表达式
对象创建表达式

原始表达式:

常量、直接量: 3.14?“test”

关键字: null this ture

变量: I,k,j

属性访问表达式

var?o = {x:1}; o.x o[‘x’]

?6、运算符

delete 运算符
var obj = {x:1};
obj.x;      //   1
delete obj.x;
obj.x;     //   undefined
var obj = {};
Object.defineProperty(obj,’x’,{
	configurable: false
	value : 1
});
delete obj.x;   // false
obj.x;        //1
只有 configurable 是 true,才可以 delete
typeof 100 === ‘number’    // true

?7、块语句和 var 语句

没有块级作用域。例如:

for (var i = 0;i<10;i++){
 var str = “hi”;
 console.log(str);
}
Console.log(i);     //  10

声明变量语句:

foo:

var a=b=1 确实创建了 a 和 b,且赋值位 1,但是 b 被隐私创建位全局变量。

8、函数等其他语句

函数声明:会被预先处理(函数前置)

fd();  // true
function fd(){
	// do sth.
    return
}
函数表达式:
Fe();  //TypeError
var fe = function(){
	// do sth.
}
for…in 语句://1,顺序不确定
//2,enumerable 为 false 时不会出现
var p;
//3,for in 对象属性时受原型链影响
var obj = {x:1,y:2}
for (p in obj){
}

With 语句可以修改当前的作用域,但现在不建议使用

·让 JS 引擎优化更难

·可读性差

·可被变量定义代替

·严格模式下被禁用

9、严格模式

严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,并增强安全性。

进入严格模式的方法:

function func(){

‘use strict’;

}

整个函数类是严格模式,同时可以向上兼容,如果浏览器不支持严格模式,只会被当成普通字符串,并且被忽略

‘use strict’;

function func(){

}

指定整个 JS 文件内是严格模式

不允许使用 with,会报 SyntaxError

不允许未声明的变量被赋值, ReferenceError

arguments 变为参数的静态副本

delete 参数、函数名报错 SyntaxError

delete 不可配置的属性报错 TypeError

对象字面量重复属性名报错 SyntaxError

禁止八进制字面量 SyntaxError

eval,arguments 变为关键字,不能作为变量、函数名 SyntaxError

eval 独立作用域

10、对象

对象中包含一系列属性,这些属性是无序的。每个属性都有一个字符串 key 和对应的 value。

function foo(){}   //函数对象会默认带 prototype 属性,是对象属性
foo.prototype.z = 3;

var obj = new foo();
obj.y = 2;
obj.x = 1;

obj.x;     //1
obj.y;     //2
obj.z;   //3
typeof obj.toString;     //  ‘function
‘z’ in obj;   //true
Obj.hasOwnProperty(‘z’);   //false
obj.z = 5; //不会改变原型链的值,不会向原型链上查找,仅在对象上修改或添加值

Obj.hasOwnProperty(‘z’); ??//true
foo.prototype.z; //still 3
obj.z; //5
obj.z = undefined;
obj.z; ???// undefined
delete obj.z; // true
obj.z; // 3
delete obj.z; // true 
obj.z; ??// still 3!!!! 只会删除掉 delete 对象上的属性,不会影响到原型链

11、属性操作

Var obj = {x:1};
obj.y; ??//undefined
vary z = obj.y.z ??// TypeError: Cannot read property ‘z’ of undefined
obj.y.z = 2; ?// TypeError: Cannot set property ‘z’ of undefined

有些属性不允许被删除:

delete Object.prototype; ?// false

var 定义的全局变量和局部变量不能被删除

函数声明,不管是全局函数还是局部函数都不能删除。

使用 Object.definePropety()创建,若不特殊标明 enumerable,则默认为 false

function foo(){}
Object.defineProperty(foo.prototype,’z’, {get:function(){retrun 1;}});
var obj = new foo();
obj.z;   // 1
obj.z = 10;   
// obj 没有 z 属性时,原型链向上查找发现有对应的 set 或 get 方法,
//尝试赋值时,会走原型链上的 get 或 set 方法,不会按照给当前对象添加新属性的方式处理。
obj.z;   //  still 1 

如何修改呢?

Object.defineProperty(obj,’z’,{value:100,configurable:true});
obj.z;  // 100
delete obj.z;  
obj.z;  // back to 1

相似的:

Var o = {};
Object.defineProperty(o,’x’,{value : 1});  // writable = false  configurable=false
var obj = Object.create(o);
obj.x;  // 1
obj.x = 200;
obj.x; // still 1 ,can’t change it

修改方法:

Object.defineProperty(obj,’x’,{writable:true, configurable:true,value : 100});
obj.x;  // 100
obj.x = 500;
obj.x; // 500

web 前端中文站点评

至此,给大家分享完JavaScript需要注意的一些知识上篇,后面会继续更新下篇,希望大家能继续学完。

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:javascript 我走过的坑 技术积累记录之上篇
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址