javascript - 调用函数对象来加载你的js

Question

 function FriendlyChat() {
    // statements
 }

 FriendlyChat.protoype.somemethod = function() {
   // statements
 };
 FriendlyChat.protoype.somemethod2 = function() {
   //statements
 };

 window.onload = function() {
   window.friendlyChat = new FriendlyChat();
 };

所以我在 Google Codelab 上工作时注意到了上面的 js 结构。我有两个问题。

1. 在普通对象中，您必须调用该函数，即 Object.somemethod()该结构如何调用分配给它的方法。根据我有限的理解，Firendlychat.protoype.该方法处理
   函数作为对象，方法被传递给创建的新对象window.onload.Via继承，创建的对象即FriendlyChat具有所有这些方法。然而这些方法都没有以任何方式被调用。这是如何运作的？
2. 以这种方式构建代码除了可读性

注意:主要功能

 function FriendlyChat() {
   this.checkSetup();

   // Shortcuts to DOM Elements.
   this.messageList = document.getElementById('messages');
    this.messageForm = document.getElementById('message-form');


  // Saves message on form submit.
  this.messageForm.addEventListener('submit', this.saveMessage.bind(this));
  this.signOutButton.addEventListener('click', this.signOut.bind(this));
  this.signInButton.addEventListener('click', this.signIn.bind(this));

// Toggle for the button.
  var buttonTogglingHandler = this.toggleButton.bind(this);
  this.messageInput.addEventListener('keyup', buttonTogglingHandler);
  this.messageInput.addEventListener('change', buttonTogglingHandler);

  // Events for image upload.
  this.submitImageButton.addEventListener('click', function(e) {
   e.preventDefault();
   this.mediaCapture.click();
 }.bind(this));
  this.mediaCapture.addEventListener('change', 
 this.saveImageMessage.bind(this));

   this.initFirebase();
 }
//the methods are setup here
// Sets up shortcuts to Firebase features and initiate firebase auth.
FriendlyChat.prototype.initFirebase = function() {
     this.auth = firebase.auth();
     this.database = firebase.database();
     this.storage = firebase.storage();
     // Initiates Firebase auth and listen to auth state changes.
     this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
    };


// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
  e.preventDefault();


   }
};


FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
 imgElement.src = imageUri;
};

 // Saves a new message containing an image URI in Firebase.
// This first saves the image in Firebase storage.
FriendlyChat.prototype.saveImageMessage = function(event) {
   event.preventDefault();
   var file = event.target.files[0];

   // Clear the selection in the file picker input.
   this.imageForm.reset();

    // Check if the file is an image.
  if (!file.type.match('image.*')) {
      var data = {
       message: 'You can only share images',
        timeout: 2000
      };
        this.signInSnackbar.MaterialSnackbar.showSnackbar(data);
       return;
   }
      // Check if the user is signed-in
     if (this.checkSignedInWithMessage()) {

    // TODO(DEVELOPER): Upload image to Firebase storage and add message.

   }
 };

// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithRedirect(provider);
};

  // Signs-out of Friendly Chat.
 FriendlyChat.prototype.signOut = function() {
 this.auth.signOut();
};

Answer 1

我在使用原型(prototype)继承时看到的优点之一是您可以控制对象的所有实例。例如:

 function FriendlyChat() {
   this.chatIsActive = true; 
 }

 FriendlyChat.prototype.deactivateChat = function(...rooms) {
   for (chatRoom of rooms) {
     chatRoom.chatIsActive = false;
   }
 }; 
var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();
var chatController = new FriendlyChat();

chatController.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)

但是，在 ES6 中，您可以这样做:

 class FriendlyChat {
   constructor() {
     this.chatIsActive = true;
   }
   static deactivateChat(...rooms) {
     for (let chatRoom of rooms) {
       chatRoom.chatIsActive = false;
     }
   }
 }

var chat1 = new FriendlyChat();
var chat2 = new FriendlyChat();

FriendlyChat.deactivateChat(chat1, chat2)
console.log(chat1.chatIsActive)

使用原型(prototype)的另一个优点是，当您通过 new 关键字创建对象时，可以节省内存空间。例如上面ES5中的代码，你可以看到我使用new制作的chat1和chat2。然后 chat1 和 chat2 将能够访问共享空间中的 deactivateChat() 方法。这是因为称为原型(prototype)链的概念。

下一个 ES6 版本只是一个语法糖 - 在幕后它与 ES5 版本相同