This time I will bring you a detailed explanation of the implicit call of javascript. What are the precautions for implicit call using javascript. The following is a practical case, let's take a look.
Preface
I don’t know if it is accurate to describe it as implicit calling. Its behavior is always hidden behind the scenes, and it shows its face from time to time. It doesn’t seem to have much effect, but it is still useful to understand it. Guaranteed to be of great use under your use.
The so-called implicit call simply means automatically calling some methods, and these methods can be modified externally like hooks, thereby changing the established behavior.
Below I will list some implicit calls that I have seen recently. The examples are just to the point. Welcome to add
DataType conversion toSting and valueOf
var obj = {
a: 1,
toString: function () {
console.log('toString')
return '2'
},
valueOf: function () {
console.log('valueOf')
return 3
}
}
console.log(obj == '2'); //依次输出 'valueOf' false
console.log(String(obj));//依次输出 'toString' '2'var obj = {
a: 1,
toString: function () {
console.log('toString')
return '2'
},
valueOf: function () {
console.log('valueOf')
return {} //修改为对象
}
}
console.log(obj == '2'); //依次输出 'valueOf' 'toString' true
console.log(Number(obj));//依次输出 'valueOf' 'toString' 2In the operation of the equality operator, the object will first call valueOf. If the returned value is an object, it will call toSting, except null, and then use the returned value for comparison. The first example is equivalent to 3 == '2' outputs false. In the second example, executing valueOf returns an object, and then executes toString. Finally, it is equivalent to '2' == '2' and outputs true. In the Number and String methods, Number will call valueOf first. , and then call toString, which is the opposite in the String method.
In addition to the above two examples, conversion of data types also exists in various other operations, such as numerical operations. When reference types are involved, the valueOf or toString method will be called. , as long as the object is an object, it will inherit these two methods. We can override these two methods to affect the behavior of data type conversion
handleEvent in DOM2 event
var eventObj = {
a: 1,
handleEvent: function (e) {
console.log(this, e);//返回 eventObj 和 事件对象
alert(this.a)
}
}
document.addEventListener('click', eventObj)You read that right, the second parameter of addEventListener can be an object in addition to a function. After the event is triggered, the handleEvent method of the object will be executed. When the method is executed, this points to eventObj. You can bind the data you want to pass in. Defined On the eventObj object
JSON object toJSON
var Obj = {
a: 10,
toJSON: function () {
return {
a: 1,
b: function () {
},
c: NaN,
d: -Infinity,
e: Infinity,
f: /\d/,
g: new Error(),
h: new Date(),
i: undefined,
}
}
}
console.log(JSON.stringify(Obj));
//{"a":1,"c":null,"d":null,"e":null,"f":{},"g":{},"h":"2018-02-09T19:29:13.828Z"}If the object passed in by the stringify method of JSON has a toJSON method, then the object executed by this method will Convert to the object returned after toJSON is executed. One thing to note is that if the following code
var Obj1 = {
a: 10,
toJSON: function () {
console.log(this === Obj1);//true
return this
}
}
console.log(JSON.stringify(Obj1));//{"a":10} var Obj2 = {
a: 10,
toJSON: function () {
console.log(this === Obj2);//true
return {
a: this
}
}
}
console.log(JSON.stringify(Obj2));//报错 Maximum call stack size exceededaccording to the above statement, it is obvious that the error is what we expected, but when returning this directly, no error is reported at all, so why not You can make a bold guess that it internally compares the object returned by toJSON with the original object. If they are equal, the then
##promise object's then
var obj = {
then: function (resolve, reject) {
setTimeout(function () {
resolve(1000);
}, 1000)
}
}
Promise.resolve(obj).then(function (data) {
console.log(data);// 延迟1秒左右输出 1000
}) var timePromise = function (time) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(time);
}, time)
})
}
var timePromise1 = timePromise(1000);
var timePromise2 = timePromise(2000);
var timePromise3 = timePromise(3000);
Array.prototype.then = function (resolve) {
setTimeout(function () {
resolve(4000);
}, 4000)
}
Promise.all([timePromise1, timePromise2, timePromise3]).then(function (time) {
console.log(time);// 等待4秒左右输出 4000
})Object attribute accessor get and set
var obj = {
_age: 100,
get age() {
return this._age < 18 ? this._age : 18;
},
set age(value) {
this._age = value;
console.log(`年龄设置为${value}岁`);
}
}
obj.age = 1000; //年龄设置为1000岁
obj.age = 200; //年龄设置为200岁
console.log(obj.age);// 18
obj.age = 2; ////年龄设置为2岁
console.log(obj.age); // 2 var input = document.createElement('input');
var span = document.createElement('span');
document.body.appendChild(input);
document.body.appendChild(span);
var obj = {
_age:''
}
var obj = Object.defineProperty(obj, 'age', {
get: function () {
return this._age;
},
set: function (value) {
this._age = value;
input.value = value;
span.innerHTML = value;
}
});
input.onkeyup = function (e) {
if (e.keyCode === 37 || e.keyCode === 39) {
return;
}
obj.age = this.value
}
Iterator interface Symbol.iterator
var arr = [ 1, 2 , 3];
arr[Symbol.iterator] = function () {
const self = this;
let index = 0;
return {
next () {
if(index < self.length) {
return {
value: self[index] ** self[index++],
done: false
}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
console.log([...arr, 4]);//返回 [1, 4, 27, 4]
for(let value of arr) {
console.log(value); //依次返回 1 4 27
}4 Ways to JS Loop Nodelist Dom List
How to achieve the intermittent loop scrolling effect of JS text
The above is the detailed content of Detailed explanation of implicit calls in javascript. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
