Hướng dẫn deep dive javascript - javascript lặn sâu

Sử dụng thuật ngữ đơn giản và một ví dụ trong thế giới thực, bài đăng này giải thích

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Đây là cho bạn

Tôi đã nhận thấy rằng nhiều lời giải thích cho

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Có lẽ bạn đã trì hoãn lặn vào

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Trước khi chúng tôi đi sâu vào những gì

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Chức năng so với lập trình hướng đối tượng

Bạn có thể hoặc không biết rằng JavaScript có cả cấu trúc chức năng và hướng đối tượng, vì vậy bạn có thể chọn tập trung vào cái này hoặc cái kia hoặc sử dụng cả hai.

Tôi đã tham gia chương trình chức năng sớm trong hành trình JavaScript của mình và tránh lập trình hướng đối tượng như bệnh dịch hạch. Tôi đã không biết hoặc hiểu các từ khóa hướng đối tượng như

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Và tôi đã đúng.

Loại của. Bạn có thể có thể nhận được bằng cách chỉ tập trung vào một mô hình và không bao giờ tìm hiểu về cái kia, nhưng bạn sẽ bị giới hạn với tư cách là một nhà phát triển JavaScript. Để minh họa sự khác biệt giữa lập trình chức năng và hướng đối tượng, tôi sẽ sử dụng một mảng dữ liệu bạn bè trên Facebook làm ví dụ.

Hãy để nói rằng bạn đang xây dựng một ứng dụng web nơi người dùng đăng nhập với Facebook và bạn hiển thị một số dữ liệu liên quan đến bạn bè trên Facebook của họ. Bạn sẽ cần phải nhấn điểm cuối trên Facebook để lấy dữ liệu của bạn bè của họ. Nó có thể có một số thông tin như

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

const data = [
  {
    firstName: 'Bob',
    lastName: 'Ross',
    username: 'bob.ross',    
    numFriends: 125,
    birthday: '2/23/1985',
    lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
  },
  ...
]

Dữ liệu trên là những gì bạn nhận được từ API Facebook (giả, tưởng tượng). Bây giờ bạn cần phải chuyển đổi nó, để nó ở định dạng hữu ích cho bạn và dự án của bạn. Hãy nói rằng bạn muốn hiển thị những điều sau đây cho mỗi người bạn của người dùng:

• Tên của họ ở định dạng

  function initializeFriend(data) {
    return {
      fullName: `${data.firstName} ${data.lastName}`,
      getThreeRandomPosts: function() {
        // get three random posts from data.lastTenPosts
      },
      getDaysUntilBirthday: function() {
        // use data.birthday to get the num days until birthday
      }
    };
  }
  const objectFriends = data.map(initializeFriend)
  objectFriends[0].getThreeRandomPosts() 
  // Gets three of Bob Ross's posts

  8
• Ba bài viết ngẫu nhiên
• Số ngày cho đến sinh nhật của họ

Phương pháp tiếp cận chức năng

Một cách tiếp cận chức năng sẽ chuyển toàn bộ mảng hoặc mỗi phần tử của một mảng thành một hàm trả về dữ liệu được thao tác mà bạn cần:

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Bạn bắt đầu với dữ liệu thô (từ API Facebook). Để biến nó thành dữ liệu hữu ích cho bạn, bạn chuyển dữ liệu vào một hàm và đầu ra là hoặc bao gồm dữ liệu được thao tác mà bạn có thể sử dụng trong ứng dụng của mình để hiển thị cho người dùng.

Bạn có thể tưởng tượng làm một cái gì đó tương tự để có được ba bài viết ngẫu nhiên và tính toán số ngày cho đến sinh nhật người bạn đó.

Cách tiếp cận chức năng là lấy dữ liệu thô của bạn, truyền nó qua một hàm hoặc nhiều chức năng và xuất dữ liệu hữu ích cho bạn và dự án của bạn.

Cách tiếp cận hướng đối tượng

Cách tiếp cận hướng đối tượng có thể khó nắm bắt hơn một chút đối với những người mới lập trình và học JavaScript. Ý tưởng ở đây là bạn biến mỗi người bạn thành một đối tượng có mọi thứ cần thiết để tạo ra những gì bạn là nhà phát triển cần.into an object that has everything it needs to generate what you as the developer need.

Bạn có thể tạo các đối tượng có thuộc tính

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

Cách tiếp cận hướng đối tượng là tạo các đối tượng cho dữ liệu của bạn có trạng thái và bao gồm tất cả thông tin họ cần để tạo dữ liệu hữu ích cho bạn và dự án của bạn.

Điều này có liên quan gì đến điều này?

Bạn có thể chưa bao giờ nghĩ sẽ viết một cái gì đó như

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Lý do duy nhất mà các phương pháp

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Điều gì sẽ xảy ra nếu bạn có một phương pháp khác, hãy để Lôi gọi nó là

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Công việc vừa ý?

No!

Tất cả mọi thứ trong đối tượng mới được tạo của chúng tôi đều có quyền truy cập vào tất cả các biến trong

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Bạn có thể sử dụng

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    }
  };
}

0 và

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    }
  };
}

1 để trả lại lời chào không?

Vâng, bạn hoàn toàn có thể. Nhưng điều gì sẽ xảy ra nếu chúng ta cũng muốn đưa vào lời chào bao nhiêu ngày cho đến sinh nhật người bạn đó? Chúng tôi sẽ phải tìm cách gọi

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

Nó thời gian cho

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Cuối cùng, cái này là gì

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Nếu

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Bạn nói được gọi là trong bối cảnh của đối tượng đó, điều đó thậm chí có nghĩa là gì?

Đừng lo lắng, chúng tôi sẽ nhận được điều đó sau!

Vì vậy, nếu chúng tôi muốn gọi

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Lưu ý bên lề: Don Tiết sử dụng

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Hãy để Let Refactor

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    }
  };
}

Bây giờ, tất cả mọi thứ mà đối tượng này cần đều được đưa vào chính đối tượng một khi

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

OK, vì vậy đó là một cách để sử dụng

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

3, nhưng bạn nói rằng

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

3 có thể là nhiều thứ khác nhau tùy thuộc vào bối cảnh. Điều đó nghĩa là gì? Tại sao nó luôn luôn đề cập đến chính đối tượng?

Có một số lần bạn muốn buộc

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

function initializeFriend(data) {
  return {
    lastTenPosts: data.lastTenPosts,
    birthday: data.birthday,
    username: data.username,    
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from this.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use this.birthday to get the num days until birthday
    },
    greeting: function() {
      const numDays = this.getDaysUntilBirthday()      
      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
    },
    onFriendClick: function() {
      window.open(`https://facebook.com/${this.username}`)
    }
  };
}

Lưu ý rằng chúng tôi đã thêm

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    }
  };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

Và bây giờ JavaScript:

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Trong mã trên, chúng tôi tạo một đối tượng cho Bob Ross. Chúng tôi nhận được phần tử DOM được liên kết với Bob Ross. Và bây giờ chúng tôi muốn thực hiện phương thức

Nope!

Có chuyện gì?

Lưu ý rằng chức năng chúng tôi đã chọn cho trình xử lý onclick là

bobRossDOMEl.addEventListener("onclick", function() {  window.open(`https://facebook.com/${this.username}`)})bobRossDOMEl.addEventListener("onclick", function() {
  window.open(`https://facebook.com/${this.username}`)
})

Bây giờ bạn có thấy vấn đề không? Khi chúng tôi đặt trình xử lý onclick là

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Nó thời gian cho

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Ràng buộc rõ ràng này

Những gì chúng ta cần làm là liên kết rõ ràng

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Trước đó,

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Cho đến thời điểm này, chúng tôi đã thấy lý do tại sao

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Hàm mũi tên

Bạn có thể nhận thấy rằng các chức năng mũi tên là điều mới. Mọi người dường như thích họ vì họ súc tích và thanh lịch. Bạn có thể biết rằng chúng hơi khác so với các chức năng bình thường nhưng có lẽ bạn không biết sự khác biệt là gì.

Có lẽ cách đơn giản nhất để mô tả cách các chức năng mũi tên khác nhau là:

Bất cứ điều gì

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

OK, điều đó không hữu ích, tôi nghĩ đó là hành vi của một chức năng bình thường?

Hãy để giải thích với ví dụ

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Điều này sẽ hoạt động? Nếu không, làm thế nào chúng ta có thể thay đổi nó để làm cho nó hoạt động?

Không, nó sẽ không hoạt động. Bởi vì

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Bạn nói rằng nó không được gọi là trong bối cảnh của một đối tượng. Nếu đó không phải là người được gọi là trong bối cảnh của một đối tượng thì tôi không biết là gì.

Tôi biết rằng, trong bối cảnh của một đối tượng, là thuật ngữ mơ hồ. Có lẽ một cách tốt để xác định xem một hàm được gọi là trong bối cảnh của một đối tượng hay không là tự nói với mình thông qua cách gọi chức năng và xác định xem một đối tượng có gắn liền với chức năng hay không.

Hãy để nói chuyện thông qua những gì xảy ra khi chúng ta thực hiện

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Bây giờ, hãy để nói chuyện thông qua những gì xảy ra khi chúng ta thực hiện

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

OK, ở đây, một điều khó khăn để kiểm tra kiến ​​thức của bạn. Hãy nói rằng có một chức năng

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Điều gì sẽ xảy ra nếu chúng ta đã làm điều này:

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Hãy nói chuyện với nhau thông qua nó: Hãy lấy đối tượng

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Các chức năng của mũi tên để giải cứu:

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Quy tắc của chúng tôi từ trên:

Bất cứ điều gì

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Hàm mũi tên được khai báo bên trong

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

function initializeFriend(data) {
  return {
    fullName: `${data.firstName} ${data.lastName}`,
    getThreeRandomPosts: function() {
      // get three random posts from data.lastTenPosts
    },
    getDaysUntilBirthday: function() {
      // use data.birthday to get the num days until birthday
    },
    greeting: function() {
      return `Hello, this is ${fullName}'s data!`
    }
  };
}

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Sự kết luận

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

• const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  19 và

  const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  20

• const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  3 thay đổi như thế nào khi

  const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  22 tham gia
• Cách

  const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  3 thay đổi với ES6

  const fullNames = getFullNames(data)
  // ['Ross, Bob', 'Smith, Joanna', ...]

  24

Tôi khuyến khích bạn tự hỏi mình những câu hỏi về những gì bạn nghĩ

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

Và nếu bạn muốn tự kiểm tra, hãy xem các bài tập YDKJS: Các nguyên mẫu này & đối tượng.