CTN 08. Left shift (<<) operator, Object.getOwnPropertyNames and window object (browser), Function contructor (bind / call / apply)

Hello! I'm Zu.Doan

Series này mình muốn rèn luyện khả năng suy nghĩ và giải bài tập, qua đó để hiểu rõ hơn các khái niệm của Javascript.

Bài 1

var languages = {
  name: ["elixir", "golang", "js", "php", { name: "feature" }],
  feature: "awesome",
};

let flag = languages.hasOwnProperty(Object.values(languages)[0][4].name);

(() => {
  if (flag !== false) {
    console.log(
      Object.getOwnPropertyNames(languages)[0].length <<
        Object.keys(languages)[0].length
    );
  } else {
    console.log(
      Object.getOwnPropertyNames(languages)[1].length <<
        Object.keys(languages)[1].length
    );
  }
})();

Lời giải:

var languages = {
  name: ["elixir", "golang", "js", "php", { name: "feature" }],
  feature: "awesome",
};

let flag = languages.hasOwnProperty(Object.values(languages)[0][4].name);
// Object.values(languages) = Array(
//    ["elixir", "golang", "js", "php", { name: "feature" }],
//    "awesome"
// )

// => flag = true

(() => {
  if (flag !== false) { // matching this case
    console.log(
      Object.getOwnPropertyNames(languages)[0].length <<
        Object.keys(languages)[0].length
    );

    // Object.getOwnPropertyNames(languages) = ['name', 'feature']
    // => Object.getOwnPropertyNames(languages)[0].length = 4

    // Object.keys(languages) = ['name', 'feature']
    // => Object.keys(languages)[0].length = 4

    // kết qủa = 4 * 2^4 = 64
  } else {
    console.log(
      Object.getOwnPropertyNames(languages)[1].length <<
        Object.keys(languages)[1].length
    );
  }
})();

Kiến thức liên quan:

• Left shift (<<) operator
• Object.getOwnPropertyNames

Bài 2

var player = {
  name: "Ronaldo",
  age: 34,
  getAge: function () {
    return ++this.age - this.name.length;
  },
};

function score(greeting, year) {
  console.log(
    greeting + " " + this.name + `! You were born in  ${year - this.getAge()}`
  );
}

window.window.window.score.call(window.window.window.player, "Kiora", 2019);

score.apply(player, ["Kiora", 2009]);

const helloRonaldo = window.score.bind(window.player, "Kiora", 2029);

helloRonaldo()

Lời giải:

var player = {
  name: "Ronaldo",
  age: 34,
  getAge: function () {
    return ++this.age - this.name.length;
  },
};

function score(greeting, year) {
  console.log(
    greeting + " " + this.name + `! You were born in ${year - this.getAge()}`
  );
}

// bản chất đối tượng window có chứa một thuộc tính cũng tên là window và trỏ tới window global (chính nó)
// do vậy window === window.window === window.window.window

window.window.window.score.call(window.window.window.player, "Kiora", 2019);
// call là một phương thức của Function contructor
// call = bind + thực thi hàm + truyền tham số dưới dạng param1, param2 vào hàm đó
// => kết quả = "Kiora Ronaldo! You were born in 1991"

score.apply(player, ["Kiora", 2009]);
// apply là một phương thức của Function contructor
// apply = bind + thực thi hàm + truyền tham số dưới dạng [param1, param2] vào hàm đó
// Do score function đã được thực thi 1 lần khi sử dụng call method ở trên => ++this.age ở player đã thực thi => lúc này age = 35
// => kết quả = "Kiora Ronaldo! You were born in 1980"

const helloRonaldo = window.score.bind(window.player, "Kiora", 2029);
// bind là một phương thức của Function contructor
// bind ràng buộc đối tượng this bằng cách truyền vào this argument (hay chính là đối tượng mà chúng ta muốn rằng buộc this của nó vào hàm của chúng ta)
// + truyền tham số dưới dạng param1, param2 vào hàm đó (tham số được sử dụng trong bind sẽ có độ ưu tiên cao hơn)

helloRonaldo()
// Do score function đã được thực thi 2 lần khi sử dụng call & apply method ở trên => ++this.age ở player đã thực thi 2 lần => lúc này age = 36
// => kết quả = "Kiora Ronaldo! You were born in 1999"

Kiến thức liên quan:

• Đối tượng window (trong trình duyệt)
• Function contructor: bind / call / apply