java 运算符的优先级 <p dir="auto

js笔记收录(1),about msforest/notebook

msforest commented on June 20, 2024

delete操作符只能对实例的属性和方法有效，对原型上的属性和方法删除无效

es5引入了几个方法来防止对对象的修改：

防止扩展
禁止为对象添加属性和方法，但已存在的属性和方法是可以被修改和删除
密封
类似‘防止扩展’，而且禁止为对象删除已存在的属性和方法
冻结
类似‘密封’，而且禁止为对象修改已存在的属性和方法（所有字段均只读）

//防止扩展
var person = {name:'nico'}
Object.preventExtensions(person);
console.log(Object.isExtensible(person));  //false
person.age = 22;  //正常情况下，悄悄失败，严格模式下会抛出错误

//密封
Object.seal(person);
console.log(Object.isExtensible(person));  //false
console.log(Object.isSealed(person));  //true
delete person.name;  //正常情况下，悄悄失败，严格模式下会抛出错误
person.age = 22;  //同上

//冻结
Object.freeze(person);
console.log(Object.isExtensible(person));  //false
console.log(Object.isSealed(person));  //true
console.log(Ojbect.isFrozen(person));  //true
person.name = 'welcome';  //正常情况下，悄悄失败，严格模式下会抛出错误
person.age = 22;  //同上
delete person.name;  //同上

from notebook.

msforest commented on June 20, 2024

setTimeout/setInterval中的this

var name = 'some';
var adding = {
    name: 'adding',
    say: function(){ alert('I\'m ' + this.name); }
};
adding.say();  //I'm adding
setTimeout(adding.say, 1000);   //I'm some
setInterval(adding.say, 1000);   //I'm some

setTimeout(function(){
    adding.say();  //I'm adding
}, 1000);
setInterval(function(){
    adding.say();  //I'm adding
}, 1000);

2

在setTimeout中传入的不是函数时，this则指向当前对象；
当在setTimeout中传入的参数为函数时，函数内部的this才会指向window对象。
可以通过bind来绑定this值

var name = 'some';
var adding = {
    name: 'adding',
    say: function(){ setTimeout(console.log('i\'m ' + this.name), 1000); }
};
adding.say(); // i'm adding
var adding = {
    name: 'adding',
    say: function(){ setTimeout(function(){
         console.log('i\'m ' + this.name); 
     },1000)
}
};
adding.say(); // i'm some

可以通过保存this值或bind方法来得到我们期望的this
如果使用call或apply方法来代替bind方法，得到的结果也是正确的，但是call方法会在调用之后立即执行，那样也就没有了延时的效果，定时器也就没有用了

setTimeout/setInterval方法的第三个参数及之后的参数都作为function函数的参数

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

setTimeout

from notebook.

msforest commented on June 20, 2024

避免使用空位数组
new Array(3) 构造函数会返回一个 length 属性被设置为此参数的空数组。需要特别注意的是，此时只有 length 属性被设置，真正的数组并没有生成。
new Array(3).join('#') 将会返回 ##
javascript-garden
array 空位

from notebook.

msforest commented on June 20, 2024

attribute & property

attribute是对于html而言的特性，property是对于dom节点而言的；对于标准的html特性，可以通过点操作符来获取值，而非标准的html特性，需要通过方法来获取值，比如getAttribute；
attribute & property这篇文章介绍了两者的共同点和不同点，如通过DOM对象的点操作符获取非标准的html特性，值会等于undefined；

<body id="test" something="non-standard">
  <script>
    alert(document.body.id); // test
    // non-standard attribute does not yield a property
    alert(document.body.something); // undefined
  </script>
</body>

对于标准的html特性的更新，对应的dom获取的property值也会相应更新

<input>

<script>
  let input = document.querySelector('input');

  // attribute => property
  input.setAttribute('id', 'id');
  alert(input.id); // id (updated)

  // property => attribute
  input.id = 'newId';
  alert(input.getAttribute('id')); // newId (updated)
</script>

But，input的value值不会同步更新

<input>

<script>
  let input = document.querySelector('input');

  // attribute => property
  input.setAttribute('value', 'text');
  alert(input.value); // text

  // NOT property => attribute
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text (not updated!)
</script>

对于一些非标准的attribute，一般使用data-*前缀，这样就可以通过DOM对象的点操作符来获取/更新值，如

<div id="order" class="order" data-order-state="new">
  A new order.
</div>

<script>
  // read
  alert(order.dataset.orderState); // new

  // modify
  order.dataset.orderState = "pending"; // (*)
</script>

top

from notebook.

msforest commented on June 20, 2024

javascript 运算符的优先级

MDN Operator precedence

Precedence	Operator type	Associativity	Individual operators
20	`Grouping`	n/a	`( … )`
19	`Member Access`	left-to-right	`… . …`
	`Computed Member Access`	left-to-right	`… [ … ]`
	`new` (with argument list)	n/a	`new … ( … )`
	Function Call	left-to-right	`… ( … )`
18	`new` (without argument list)	right-to-left	`new …`
17	`Postfix Increment`	n/a	`… ++`
17	`Postfix Decrement`	n/a	`… --`
16	Logical NOT	right-to-left	`! …`
	Bitwise NOT		`~ …`
	Unary Plus		`+ …`
	Unary Negation		`- …`
	Prefix Increment		`++ …`
	Prefix Decrement		`-- …`
	typeof		`typeof …`
	void		`void …`
	delete		`delete …`
	await		`await …`
15	Exponentiation	right-to-left	`… ** …`
14	Multiplication	left-to-right	`… * …`
	Division		`… / …`
	Remainder		`… % …`
13	Addition	left-to-right	`… + …`
13	Subtraction	left-to-right	`… - …`
12	Bitwise Left Shift	left-to-right	`… << …`
	Bitwise Right Shift		`… >> …`
	Bitwise Unsigned Right Shift		`… >>> …`
11	Less Than	left-to-right	`… < …`
	Less Than Or Equal		`… <= …`
	Greater Than		`… > …`
	Greater Than Or Equal		`… >= …`
	in		`… in …`
	instanceof		`… instanceof …`
10	Equality	left-to-right	`… == …`
	Inequality		`… != …`
	Strict Equality		`… === …`
	Strict Inequality		`… !== …`
9	Bitwise AND	left-to-right	`… & …`
8	Bitwise XOR	left-to-right	`… ^ …`
7	Bitwise OR	left-to-right	`… \| …`
6	Logical AND	left-to-right	`… && …`
5	Logical OR	left-to-right	`… \|\| …`
4	Conditional	right-to-left	`… ? … : …`
3	Assignment	right-to-left	`… = …`
			`… += …`
			`… -= …`
			`… **= …`
			`… *= …`
			`… /= …`
			`… %= …`
			`… <<= …`
			`… >>= …`
			`… >>>= …`
			`… &= …`
			`… ^= …`
			`… \|= …`
2	yield	right-to-left	`yield …`
2	yield*	right-to-left	`yield* …`
1	Comma / Sequence	left-to-right	`… , …`

top

from notebook.

msforest commented on June 20, 2024

相等(==)深入解析

ecma262 ==

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows:

If Type(x) is the same as Type(y), then
1. If Type(x) is Undefined, return true.
2. If Type(x) is Null, return true.
3. If Type(x) is Number, then
  1. If x is NaN, return false.
  2. If y is NaN, return false.
  3. If x is the same Number value as y, return true.
  4. If x is +0 and y is −0, return true.
  5. If x is −0 and y is +0, return true.
  6. Return false.
4. If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions). Otherwise, return false.
5. If Type(x) is Boolean, return true if x and y are both true or both false. Otherwise, return false.
6. Return true if x and y refer to the same object. Otherwise, return false.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String,
return the result of the comparison x == ToNumber(y).
If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
If Type(x) is either String or Number and Type(y) is Object,
return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String or Number,
return the result of the comparison ToPrimitive(x) == y.
Return false.

from notebook.

js笔记收录(1) about notebook HOT 6 OPEN

Comments (6)

delete操作符只能对实例的属性和方法有效，对原型上的属性和方法删除无效

2

attribute & property

javascript 运算符的优先级

相等(==)深入解析

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent