JS 学习笔记1

JS 学习笔记1

JS找错

流程：打开html标签页 ——>JS控制台——>查看错误信息

变量

• 变量声明：let / const + 变量名

运算符

• === 和 == 的区别：===表示比较的两个变量数值和数据类型相同；==表示两个变量数值相同，但数据类型可能不同。

条件语句

• 规范写法：else紧接在if判断体后

函数

• panel.parentNode.removeChild(panel); //儿子不能自己删除自己，需要通过parentNode删除
• btn.onclick=displayMessage; //不加括号代表触发点击事件时才会执行函数,加括号代表直接调用

事件

• 使用addEventListener()的好处：对同一个元素，可以添加多个触发事件；

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

点击myElement后，会同时触发两个函数。

• removeEventListener()可以删除事件监听
• 事件对象，被自动传递给事件处理函数，以提供额外的功能和信息。

function bgChange(e) {
  let rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

e.target()指的是按钮本身，事件对象e的target属性始终是刚刚发生的元素的引用。

对象

• js通过构建函数来完成类的功能

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

构建函数通常大写开头（类比c++/java的类名），便于和普通函数区分。调用构建函数创建实例：

let person1 = new Person('Bob');
let person2 = new Person('Sarah');

• 创建对象的几种方式
  • 构建函数
  • Object()构造函数

  let person1=new Object();
  person1.name = 'Chris';
  person1['age'] = 38;
  person1.greeting = function() {
  	alert('Hi! I\'m ' + this.name + '.');
  }	
  

  • create()方法：基于现有对象创建新对象

  let person2=Object.create(person1);
  

• 原型对象
  • 原型对象是一个内部对象，使用_proto_访问。prototype属性包含一个对象，在这个对象中定义需要被继承的成员。
  • 每个实例对象都从原型中继承一个constructor属性，该属性指向用于构造此实例对象的构造函数。
  • 一种极其常见的对象定义模式是，在构造器（函数体）中定义属性、在 prototype 属性上定义方法。如此，构造器只包含属性定义，而方法则分装在不同的代码块，代码更具可读性。例如：

  // 构造器及其属性定义
  function Test(a,b,c,d) {
    // 属性定义
  };
  // 定义第一个方法
  Test.prototype.x = function () { ... }
  // 定义第二个方法
  Test.prototype.y = function () { ... }
  // 等等……
  

• 原型式继承
  • call()函数：用于构造继承对象的属性

  function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);
  this.subject = subject;
  }
  

  call()函数允许调用一个文件中别处定义的函数。第一个参数指明执行这个函数时想对this指定的值，即可以重新指定调用的函数里所有this指向的对象。其他的变量指定了所有目标函数运行时接受的参数。
  针对上面的例子，Person.call()相当于在Teacher内部定义属性，等同于下面代码：

  this.name={     //注意定义属性中属性的这种写法！
  	first,
  	last
  };
  this.age=age;
  this.gender=gender;
  this.interests=interests;
  

  • create()函数：用于构造继承对象的方法

  Teacher.prototype = Object.create(Person.prototype);
  

  任何想被继承的方法都应该定义在构造函数的prototype对象里，并永远使用父类的prototype创造子类的prototype，这样才不会打乱类继承结构。
• JSON
  • 注意事项
    • JSON是一种纯数据格式，它只包含属性，没有方法
    • JSON要有两边的{}使其合法
    • 可以用JSONLint检验JSON
    • JSON中只有字符串可以做属性
  • 两个重要方法
    • parse() //将JSON字符串转化为JSON对象
    • stringify() //将JSON对象转化为JSON字符串

异步

• 两种风格：callbacks和promises
• callback

btn.addEventListener('click', () => {
  alert('You clicked me!');

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

当我们把回调函数作为一个参数传递给另一个函数时，仅仅是把回调函数定义作为参数传递过去 — 回调函数并没有立刻执行，回调函数会在包含它的函数的某个地方异步执行，包含函数负责在合适的时候执行回调函数。

• promises

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  products = json;
  initialize();
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

promise 是表示异步操作完成或失败的对象。这两种可能的结果都还没有发生，因此fetch操作目前正在等待浏览器试图在将来某个时候完成该操作的结果。
注意：promises相比callback有很多优点，最好用promises

• 事件队列

像promise这样的异步操作被放入事件队列中，事件队列在主线程完成处理后运行，这样它们就不会阻止后续JavaScript代码的运行。排队操作将尽快完成，然后将结果返回到JavaScript环境。