Question

 function FriendlyChat() {
    // statements
 }

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

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

所以我在google codelab上工作时注意到js的上述结构。我有两个问题。

在普通对象中你必须调用函数，即Object.somemethod（）该结构如何调用分配给它的方法。从我有限的理解，Firendlychat.protoype.the方法对待作为对象运行，并将方法传递给在其上创建的新对象 window.onload.Via 继承，创建的对象，即friendlychat具有所有这些方法。然而，没有任何方法以任何方式被调用。这是如何工作的？
以这种方式构建代码是否有任何优势可读性

注意：主要功能

 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

我在使用原型继承时看到的一个优点是，您可以控制对象的所有实例。例如：

 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)

使用原型的另一个好处是，当您从 new 关键字创建对象时，可以节省内存空间。例如，上面ES5中的代码，您可以看到我使用 new 创建的chat1和chat2。然后chat1和chat2将能够访问共享空间中的deactivateChat（）方法。这是因为这个概念，称为原型链接。

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

Answer 2

我发布此信息作为对那些面临这种困境的人的参考。首先，ONe的核心问题是从java迁移，我似乎是熟悉的领域，但事情在js中有点不同。我强烈推荐这些链接：

Objects in Detail

js Prototype

因此，这种方法起作用的关键在于

var regex = /^[0-9\s\+\-\(\)\']*$/

现在通常在大多数语言中都有一个对象

 window.friendlyapp =new friendlychat()

然后使用你做的方法

obj() {
  attr : value
  method: function() {}
}

但是在这个方法中，var成为了window对象的一个实例，这也就是为什么不需要显式调用app的任何方法。

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

2 个答案: