Javascript笔记
Javascript数据类型有哪些？
JavaScript的数据类型分为两大类，一类是基本数据类型另一类是引用数据类型
- 基本数据类型有:
Number String Undefined Null Symbol(ES6新增数据类型)
- 引用数据类型有:
Array Function Object Date RegExp 用户自定义的类型
备注: 所有引用类型的值都是 Object 类型的实例比如下面的代码：
let arr = [1, 2, 3];
console.log(arr instanceof Object) => true
let fn = function() {};
console.log(fn instanceof Object)
...
// 其他引用类型的值同理会输出 true
所以上面的结论可以得出，Object类是JS数据类型的基础，JS中几乎所有的东西都可以归为
Object类型，所以以前刚学JS的时候就听到一句话JS中一切都皆为Object这其实从数据类型上面来看就可以看出的
JavaScript中对象的一些特性
- 对象中不能存在两个同名的属性, 值可以是任意合法的JavaScript数据类型的值
- 每个属性还有与之关联的值, 称之为
属性特性属性有以下特性:
可写 writeable => 表示是否可以设置该属性
可枚举 enumerable => 表示是否可以通过 for/in 循环该属性
可配置 configurable => 表示是否可以删除或者修改该属性 (感觉它包含了可写特性)
关于属性特性 其实 < 第6章关于对象属性有讲解到
原型(prototype)
原型 或者有时又称为 原型对象 其实都是对象函数的prototype属性的一种称呼例如下面的代码:
let fn = function() {};
console.log(fn.prototype)
// 输出为 {constructor: function(){}, __proto__: {...}}
由 原型 又延伸出了 原型链 这种概念
这个概念说起来不太顺口，但是大致就是说，每个构造函数的实例对象都有一个内部属性
__proto__ 指向它的构造函数的 prototype 属性，这个属性对象也有一个内部属性
__proto__ 指向它的构造函数的 prototype 对象，以此类推直到 原型对象 为 null为止，这种一层一层链接起来的多个原型对象就可以称为 原型链例如代码：
function Person() {
}
let p1 = new Person();
let prototypeObj1 = p1.__proto__;
let prototypeObj2 = prototypeObj1.__proto__;
let prototypeObj3 = prototypeObj2.__proto__;
console.log(prototypeObj1) // => {..}
console.log(prototypeObj2) // -> {...}
console.log(prototypeObj3) // => null
所以可以认为, 每一个JavaScript对象(null除外)，都和 原型对象 相关联并且从 原型对象 上继承属性或者方法，这种继承方式并不是只继承离对象最近的 原型对象 而是继承整个 原型链当中的所有属性和方法的，所以这里又延伸出一个问题，通过 for 循环语句一般都是会遍历对象
原型链 当中的属性和方法，所以在从性能角度来说其实并不是太好
其实 对象属性的查找 也是依据 原型链 来的，它的查找规则是这样的
每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性，搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。
当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止我们访问原型中的那个属性，但是不会修改那个属性。即使将这个属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。
案例1: 创建一个从 原型中 继承属性的 普通{} 对象或者类似 new Object() 对象
let testObj = Object.create(Object.prototype)
案例2: 创建一个没有 原型 的空对象, 这种方式创建的对象不会继承任何内容，并且也没有任何自身的属性，可以认为是 最干净 的JavaScript对象了
var testObj2 = Object.create(null);
JavaScript中 in 操作符
in 操作符的使用场景有两种：
- 单独在一个JavaScript表达式中使用
- 在
for in循环中使用
单独使用最常见的形式就是在一个 三元表达式 中进行判断操作，例如根据当前环境是否是移动端环境，来设置事件类型例如代码:
let evtType = 'onorientationchange' in window ? 'onorientationchange' : 'resize';
in 操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
for in 循环最常见的案例莫过于 遍历一个对象身上所有属性值了 例如代码
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype = {
showInfo() {
return this.name + ' ' + this.age + ' ' + this.gender
}
}
let p1 = new Person('zhangsan', 20, 'male');
for (let attr in p1) {
console.log('attr: ' + attr, 'value: ' + p1[attr])
}
返回的是所有能够通过对象访问的、可枚举 的属性，其中既包括存在于实例中的属性，也包括存在于原型 中的属性。屏蔽了原型中不可枚举的实例属性也会在for-in循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的只有IE8及更早版本中例外。
Javascript 给dom元素一次性添加多个css样式
很多时候我们需要用JS去操作dom节点的style属性样式，而且我们会习惯性的写出下面这种逐行添加的方式例如代码:
let oDiv = document.getElementById('#box');
oDiv.style.fontSize = '30px';
oDiv.style.backgroundColor = '#ccc';
// ....
但其实可以换一种更简单的方式,可以一行就可以搞定(不过这个有兼容性问题)
let oDiv = document.getElementById('#box');
oDiv.style.cssText = 'fontSize：30px;backgroundColor:#ccc;';
document.write方法 和 innerHTML属性
作用：
document.write方法向文档中写入指定的内容,该方法可以接受多个参数,并将参数的内容按顺序追加到文档中去,它的一个最大的特点是
不会覆盖文档中已有的内容innerHTML某个DOM元素对象的属性,它可以向某个元素里面写入自定的内容,但是最大的特点是
会覆盖掉元素原来的内容
== 和 === 的区别
-
==会将等号两边的运算数进行一个隐士的类型转换，然后再比较两者的值是否相同 -
===不会进行数据的类型转换，只要数据类型或者值其中一个不同就认为不同