Loose equality & strict equality

  • Loose equal

    const a = { value : 0 };
a.valueOf = function() {
    return this.value += 1;
};

console.log(a == 1 && a == 2 && a == 3); // true
Copy the code

    Note: Loose equality == converts the left and right values to the same primitive type before comparing them for equality. After the conversion (which is required for one or both sides of ==), the final equality match performs the same judgment as the === symbol. Loose equality is invertible, and for any value A and B, usually A == B has the same behavior as B == A (except for the order of transformation).

      ToPrimitive(input, PreferredType?)
Copy the code

    The optional parameter PreferredType specifies the final cast type, which can be Number or String, depending on whether the result of the ToPrimitive() method returns Number or String

  • Strictly equal

    var value = 0; //window.value
Object.defineProperty(window, 'a', {
    get: function() {
        returnthis.value += 1; }}); console.log(a===1 && a===2 && a===3) //true
Copy the code

  • Loose equality and strict equality when type is fixed

    var value = 0;
const a = {
    get: function() {
        return this.value += 1;
    }
}

console.log((0, a.get)() == 1 && (0, a.get)() == 2 && (0, a.get)() == 3); // true
console.log((0, a.get)() === 1 && (0, a.get)() === 2 && (0, a.get)() === 3); // true
Copy the code

  • Object.defineProperty

    • grammar

      Object.defineProperty(obj, prop, descriptor)

    • parameter

      Obj The object used to define attributes.

      Prop Symbol The name or property to define or modify.

      Descriptor is defining or modifying a property descriptor.

    • The return value

      The object passed to the function

  • Refer to the link

    • gist.github
    • The Denver nuggets
    • web docs

React click event comparison

  • Bind onClick with an anonymous function

    <button
    onClick={(e) => {
        alert('I clicked the button.'}} > Button </button>Copy the code

    Features: Since onClick uses anonymous functions, the onClick is treated as a new prop each time it is rerendered, reassigning the cached onClick event.

  • 2. Bind onClick using the arrow function method

    onClick = (e) => {
    alert('I clicked the button.'); }... <button onClick={this.onClick}> </button>Copy the code

  • 3, instead of declaring the arrow function internally, use the bind context

    onClick(e) {
    alert('I clicked the button.'); }... <button onClick={this.onclick.bind (this)}>Copy the code

    Features: This method works just as well as the first anonymous function, because bind returns new functions and react is considered a new prop.

Flow of events

  • There are two types of event flow, capture event flow and bubbling event flow.

    • The capture event flow starts at the root node and continues to search for execution on child nodes until the search execution reaches the target node.
    • The flow of bubbling events starts at the target node and bubbles up to the parent node for execution until it reaches the root node.

  • The event flow is divided into three phases, one is capture node, one is in target node phase, and one is bubbling phase.

Function A and function B, so B inherits from A

  • methods

    1 / / wayfunction B() {}
function A() {} B.prototype = new A(); 2 / / wayfunction A() {}
function B() { A.call(this); } // Method 3function B() {}
function A() {}
B.prototype = new A();

function B() {
    A.call(this);
}
Copy the code

  • The characteristics of

    Method 1: easy to understand, but can not implement multiple inheritance, the parent class new stereotype methods/stereotype properties, all subclasses can access

    Method 2: Multiple inheritance can be implemented, but only the instance attributes and methods of the parent class can be inherited, not the prototype attributes/methods

    Option 3: You can inherit instance properties/methods as well as stereotype properties/methods, but the example shows two A constructors

  • Refer to the link

    The Denver nuggets

The browser window size changes

  • window.onresize

    Bind events directly to the window’s onresize property. Which means that what’s behind will cover what’s in front

    Window.onresize = function() {console.log(' operation 1'); } window.onresize = function() {console.log(' operation 2'); }Copy the code

    When the browser window size changes, only ‘operation 2’ is printed.

  • $(window).resize

    • role

      The resize event occurs when the browser window is resized. You can write multiple $(window).resize methods

      The resize() method fires the resize event, or specifies the function to run when the resize event occurs.

      $(window).resize(function(){
    console.log(Following the "3")}); $(window).resize(function(){
    console.log(Following the "4")});Copy the code

      When the browser window size changes, it prints’ Operation 3′ ‘Operation 4’

      This code is executed multiple times when the browser window size changes, and sometimes we may want to deal with more complex logic that can have a big impact on performance, making it easier for the browser to fake death.

      How do you implement code that only executes after you stop changing, no matter how the window changes?

      var resizeTimer = null;
$(window).bind('resize'.function() {if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function(){
        console.log("The window has changed!"); }, 100); });Copy the code

      Delay code execution by adding a timer so that every time the window changes, we clear the event and only continue execution when it stops.

    • use

      Trigger the resize event $(selector).resize()

      Bind the function to the resize event $(selector).resize(function)

Specifies that the page returns to the top

  • 1, the jquery

    $('html, body').animate({scrollTop: 0}, 1000);
Copy the code

  • 2. Use a label anchor point for positioning

    <a href="#toTop" target="_self"> Return to top </a>Copy the code

  • Use the JS scrollTo function

    • The javascript Scroll function (scrollBy scrollTo) is used to scroll a page to a specified position. The format is defined as follows:

      S scrollBy (xnum, ynum) s scrollTo (xpos, ypos)Copy the code

    • Among them:

      ■ Xnum and ynum indicate the number of pixels to scroll horizontally and vertically, respectively. A positive value indicates the scroll to the right or down, and a negative value indicates the scroll to the left or up

      ■ Xpos and ypos refer to horizontal and vertical coordinates respectively

    • Example:

      <a href="javascript: scrollTo(0, 0);"> Return to top </a>Copy the code

  • ScrollBy slowly returns to the top

    This method uses the scrollBy function mentioned above to scroll the quantified pixels each time. The overall look is a bit of a scroll effect. The code is as follows:

    • The code is as follows: 
      var sdelay = 0;
function returnTop() {
    window.scrollBy(0, -100); // Only for y vertical-axis
    if(document.body.scrollTop > 0) { 
        sdelay = setTimeout('returnTop()', 50);
    }
}

||

var top = document.body.scrollTop || document.documentElement.scrollTop
    scrollBy(0,-top);
}
Copy the code
    • The second parameter of the scrollBy function is set to -100. Larger (e.g. -10) means slower scrolling, smaller means faster scrolling. To start scrolling, add a link at the bottom of the page: 
      <a href="javascript:returnTop();"> Return to top </a>Copy the code

  • 5, scrollTop

The scrollTop property represents the number of pixels hidden above the content area. The value of scrollTop is 0 if the element is unrolled, or greater than 0 if the element is vertically rolled, and represents the pixel width of invisible content above the element

Because the scrollTop is writable, can use the scrollTop to achieve the function back to the top of the document. The body. The scrollTop = document. The documentElement. ScrollTop = 0;

  • 6, scrollIntoView ()

The element. scrollIntoView method scrolls the current Element into the visible area of the browser

The method can accept a Boolean value as an argument. If true, the top of the element is aligned with the top of the visible portion of the current region (if the current region is scrollable); If false, the bottom of the element is aligned with the tail of the visible portion of the current region (provided that the current region is scrollable). If this parameter is not provided, it defaults to true

The principle of using this method is similar to the principle of using anchor points. Set the target element at the top of the page. When the page scrolls, the target element will be rolled out of the page area. Document.getelementbyid (‘target’).scrollinToView ();

jQuery.extend( [deep ], target, object1 [, objectN ] );

  • Description: Merges the contents of two or more objects into the first object

    [deep] The value is true or false. The default value is false(shallow copy).

    Target {} Target object

    Object1 The first object to be merged

    ObjectN Indicates the NTH object to be merged

    let state = {
    id: 1111,
    list: [
        {
            id: 0,
            name: 'name0'
        },
        {
            id: 1,
            name: 'name1'}}]let data = {
    list: [
        {
            id: 0,
            name: 'name2'}}] <! --> $.extend(true, {}, state, data); // {id: 1111, list: [{id: 0, name: 'name2'},{id: 1, name: 'name1'}}]Copy the code

What is the difference between an ES6 class new instance and an ES5 new instance

The following is an excerpt from ruan Yifeng’s translation of “Basic usage of Class” in ECMAScript 6 introduction

  • ES5 classes use the new command, just like instance objects of ES6 generated classes

    ES5 writing:

    function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
    return '(' + this.x + ', ' + this.y + ') ';
};

/ / use the new
var p = new Point(1.2); // {x: 1, y: 2}
p.toString(); / / (1, 2)
Copy the code

    ES6 writing:

    class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    toString() {
        return '(' + this.x + ', ' + this.y + ') '; }}/ / use the new
let point = new Point(1.2);
point.toString() / / (1, 2)
Copy the code

  • All methods defined inside a class are non-enumerable.

  • Written in ES5, the toString method is enumerable

__proto__ 与 prototypeThe difference between

  • Use Class in ES6 to generate instances of classes
class Point {
    constructor() {}}let point = new Point();
// The following three results agree
Point.__proto__.__proto__
Point.prototype.__proto__
point.__proto__.__proto__
ƒ : ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() : ƒ toLocaleString() ƒ valueOf() __defineGetter__: ƒ __defineGetter__() __defineSetter__: ƒ __defineSetter__() __lookupGetter__ ƒ __lookupGetter__ () __lookupSetter__ : ƒ __lookupSetter__ () get __proto__ : ƒ __proto__ () set __proto__ : ƒ __proto__ () * /
Copy the code
  • Functions and objects__proto__The same
var func = function () {};
var obj ={};
console.log(func.__proto__.__proto__)
console.log(obj.__proto__)
Copy the code

All objects in js have a __proto__ attribute, only function has a prototype attribute.

The above content is a personal summary, if there is any wrong place welcome to correct

See more articles here!!

  • Wqjiao’s personal blog
  • Wqjiao digs into the article
  • wqjiao GitHub