JS Prototype to the Rescue

上一篇 / 下一篇  2015-08-15 09:10:39 / 个人分类：JavaScript

查看( 850 ) / 评论( 5 ) / 评分( 0 / 0 )
Prototype to the Rescue

Here we have very similar code as last time, but there is an important difference. Instead of using buddy.barkto add the bark method to just the buddy object, we use Dog.prototype.bark. 

Click run this time, and both buddy and snoopy can bark just fine! Snoopy can bark too even though we haven't added a bark method to that object. How is this so? Because we have now changed the prototype for the class Dog. This immediately teaches allDogs the new method.

In general, if you want to add a method to a class such that all members of the class can use it, we use the following syntax to extend the prototype:

className.prototype.newMethod =function(){statements;
};
Sample codes:
function Dog (breed) {
  this.breed = breed;
};

// here we make buddy and teach him how to bark
var buddy = new Dog("golden Retriever");
Dog.prototype.bark = function() {
  console.log("Woof");
};
buddy.bark();  // -- buddy barks "Woof"

// here we make snoopy
var snoopy = new Dog("Beagle");
/// this time it works!
snoopy.bark(); // -- snoopy barks "Woof"

收藏 举报

TAG:

wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-15 10:34:17
// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

// define a Penguin class
function Penguin(name, numLegs) {
    this.name = name;
    this.numLegs = 2;
};


// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();

var penguin = new Penguin("hello",4);
penguin.sayName();
console.log(penguin.numLegs); // the argument 4 is not passing to numLegs, as it has been setting to 2
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-15 10:29:00
Penguin.prototype = new Animal();

This means that Penguin inherits properties and methods from Animal.
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-15 09:42:06
原帖由wilber.shinobi于2015-08-15 09:40:55发表
It's All in the Genes
In object-oriented programming, inheritance allows one class to see and us.


Note to use this key word to quote class's property
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-15 09:40:55
It's All in the Genes
In object-oriented programming, inheritance allows one class to see and use the methods and properties of another class. You can think of it as a child being able to use his or her parent's money because the child inherits the money.

We will learn more about inheritance as we continue this lesson, but for now let's just refresh our memories about how classes and objects work.

Sample Codes:
// create your Animal class here
function Animal(name,numLegs) {
    this.name = name;
    this.numLegs = numLegs;
};

// create the sayName method for Animal
Animal.prototype.sayName = function() {
    //var name = this.name;
    console.log("Hi my name is "+ this.name);
};

// provided code to test above constructor and method
var penguin = new Animal("Captain Cook", 2);
penguin.sayName();

results:
Hi my name is Captain Cook
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-08-15 09:22:02
function Cat(name, breed) {
    this.name = name;
    this.breed = breed;
};

var cheshire = new Cat("Cheshire", "British Shorthair");
var gary = new Cat("Gary","Domestic Shorthair");

// build meow method
Cat.prototype.meow = function() {
    console.log("Meow!");
};

// to call the meow method
cheshire.meow();
gary.meow();
 

评分：0

我来说两句

Open Toolbar