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环境。