Alchemy University 学习教程，第一大块：Classes & Prototypes

Subscribe to andrecronje

<100 subscribers

Subscribe to andrecronje

<100 subscribers

估值102亿融资5.45亿的Alchemy 项目，大学每周任务逐步开始。持有大学生早期卡的地址可以进入以下官网，开始大学生活：

这一期我们学习JS 第一周的最后一块内容，Classes & Prototypes。

This Keyword

1: Using This

查看要求，创建一个函数来检索 this 上的属性名称：

function thisName() {
    return this.name;
}

module.exports = thisName;

点击运行。

2: Binding This

查看要求：

输入：

function thisName() {
    return this.name;
}

const newFunction = thisName.bind({ name: 'Bob' });

module.exports = newFunction;

点击运行。

3: Implicit Binding

查看要求，将函数 getName 添加到 obj 中，该函数将在对象上调用时检索名称：

输入：

const obj = {
    name: 'Bob',
    getName: function() {
        return this.name;
    }
}

module.exports = obj;

点击运行。

4: Unbound Function

查看要求：

输入：

const fetchAge = require('./fetchAge');

function Celebrity(name) {
    this.name = name;
    const that = this;
    fetchAge(this.name, function (age) {
        that.age = age;
    });
}

module.exports = Celebrity;

点击运行。

Prototype Chain

1: Taking Shape

查看要求：

输入：

// Our Shape "Constructor"
function Shape(x, y) {
    // store x and y in this.position
    this.position = {x, y};
    this.position.x = x;
    this.position.y = y;
}

module.exports = Shape;

点击运行。

2: Move Shape

查看要求：

输入：

// Our Shape "Constructor"
function Shape(x, y) {
    this.position = {x, y};
    this.position.x = x;
    this.position.y = y;
}

    Shape.prototype.move = function(a, b) {
        this.position.x += a;
        this.position.y += b;
    }

module.exports = Shape;

3: Circle Shape

查看要求：

输入：

const Shape = require('./Shape');

function Circle(x, y, radius) {
    Shape.call(this, x, y);
    this.radius = radius;
}

module.exports = Circle;

点击运行。

4: Move Circle

查看要求：

输入：

const Shape = require('./Shape');

function Circle(x, y, radius) {
    Shape.call(this, x, y);
    this.radius = radius;
    Circle.prototype = Object.create(Shape.prototype);
}

module.exports = Circle;

5: Rectangle

查看要求：

输入：

const Shape = require('./Shape');

function Rectangle(x, y, height, width) {
    Shape.call(this, x, y);
    this.height = height;
    this.width = width;
    Rectangle.prototype = Object.create(Shape.prototype);
}

module.exports = Rectangle;

6: Rectangle Flip

查看要求：

输入：

const Shape = require('./Shape');

function Rectangle(x, y, height, width) {
    Shape.call(this, x, y);
    this.height = height;
    this.width = width;
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.flip = function() {
        let t = this.width;
        this.width = this.height;
        this.height = t;
    }
}

module.exports = Rectangle;

Classes

1: Hero

查看要求：

输入：

class Hero {
    constructor() {
        this.health = 50;
    }
}

module.exports = Hero;

点击运行。

2: Take Damage

查看要求：

输入

class Hero {
    constructor() {
        this.health = 50;
    }
    takeDamage(health) {
        this.health -= health;
    }
}

module.exports = Hero;

点击运行。

3: Warrior

查看要求：

输入：

const Hero = require('./Hero');

class Warrior extends Hero {
}

module.exports = Warrior;

点击运行。

4: Super Warrior

查看要求：

输入：

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor() {
        super();
        this.rage = 0;
    }
}

module.exports = Warrior;

点击运行。

5: Building Rage

查看要求：

输入:

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor() {
        super();
        this.rage = 0;
    }
    takeDamage(health) {
        this.rage = this.rage + 1;
        super.takeDamage(health);
    }
}

module.exports = Warrior;

点击运行。

6: Passing Health

这里注意要改两个地方：

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor(health) {
        super(health);
        this.rage = 0;
    }
    takeDamage(health) {
        this.rage += 1;
        super.takeDamage(health);
    }
}

module.exports = Warrior;

class Hero {
    constructor(health) {
        this.health = health;
    }

    takeDamage(health) {
        this.health = this.health - health;
    }
}

module.exports = Hero;

点击运行。

以上JS 的第一周课程学习结束。

未完待续……

了解更多，请关注作者：https://twitter.com/bitc2024

估值102亿融资5.45亿的Alchemy 项目，大学每周任务逐步开始。持有大学生早期卡的地址可以进入以下官网，开始大学生活：

这一期我们学习JS 第一周的最后一块内容，Classes & Prototypes。

This Keyword

1: Using This

查看要求，创建一个函数来检索 this 上的属性名称：

function thisName() {
    return this.name;
}

module.exports = thisName;

点击运行。

2: Binding This

查看要求：

输入：

function thisName() {
    return this.name;
}

const newFunction = thisName.bind({ name: 'Bob' });

module.exports = newFunction;

点击运行。

3: Implicit Binding

查看要求，将函数 getName 添加到 obj 中，该函数将在对象上调用时检索名称：

输入：

const obj = {
    name: 'Bob',
    getName: function() {
        return this.name;
    }
}

module.exports = obj;

点击运行。

4: Unbound Function

查看要求：

输入：

const fetchAge = require('./fetchAge');

function Celebrity(name) {
    this.name = name;
    const that = this;
    fetchAge(this.name, function (age) {
        that.age = age;
    });
}

module.exports = Celebrity;

点击运行。

Prototype Chain

1: Taking Shape

查看要求：

输入：

// Our Shape "Constructor"
function Shape(x, y) {
    // store x and y in this.position
    this.position = {x, y};
    this.position.x = x;
    this.position.y = y;
}

module.exports = Shape;

点击运行。

2: Move Shape

查看要求：

输入：

// Our Shape "Constructor"
function Shape(x, y) {
    this.position = {x, y};
    this.position.x = x;
    this.position.y = y;
}

    Shape.prototype.move = function(a, b) {
        this.position.x += a;
        this.position.y += b;
    }

module.exports = Shape;

3: Circle Shape

查看要求：

输入：

const Shape = require('./Shape');

function Circle(x, y, radius) {
    Shape.call(this, x, y);
    this.radius = radius;
}

module.exports = Circle;

点击运行。

4: Move Circle

查看要求：

输入：

const Shape = require('./Shape');

function Circle(x, y, radius) {
    Shape.call(this, x, y);
    this.radius = radius;
    Circle.prototype = Object.create(Shape.prototype);
}

module.exports = Circle;

5: Rectangle

查看要求：

输入：

const Shape = require('./Shape');

function Rectangle(x, y, height, width) {
    Shape.call(this, x, y);
    this.height = height;
    this.width = width;
    Rectangle.prototype = Object.create(Shape.prototype);
}

module.exports = Rectangle;

6: Rectangle Flip

查看要求：

输入：

const Shape = require('./Shape');

function Rectangle(x, y, height, width) {
    Shape.call(this, x, y);
    this.height = height;
    this.width = width;
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.flip = function() {
        let t = this.width;
        this.width = this.height;
        this.height = t;
    }
}

module.exports = Rectangle;

Classes

1: Hero

查看要求：

输入：

class Hero {
    constructor() {
        this.health = 50;
    }
}

module.exports = Hero;

点击运行。

2: Take Damage

查看要求：

输入

class Hero {
    constructor() {
        this.health = 50;
    }
    takeDamage(health) {
        this.health -= health;
    }
}

module.exports = Hero;

点击运行。

3: Warrior

查看要求：

输入：

const Hero = require('./Hero');

class Warrior extends Hero {
}

module.exports = Warrior;

点击运行。

4: Super Warrior

查看要求：

输入：

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor() {
        super();
        this.rage = 0;
    }
}

module.exports = Warrior;

点击运行。

5: Building Rage

查看要求：

输入:

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor() {
        super();
        this.rage = 0;
    }
    takeDamage(health) {
        this.rage = this.rage + 1;
        super.takeDamage(health);
    }
}

module.exports = Warrior;

点击运行。

6: Passing Health

这里注意要改两个地方：

const Hero = require('./Hero');

class Warrior extends Hero {
    constructor(health) {
        super(health);
        this.rage = 0;
    }
    takeDamage(health) {
        this.rage += 1;
        super.takeDamage(health);
    }
}

module.exports = Warrior;

class Hero {
    constructor(health) {
        this.health = health;
    }

    takeDamage(health) {
        this.health = this.health - health;
    }
}

module.exports = Hero;

点击运行。

以上JS 的第一周课程学习结束。

未完待续……

了解更多，请关注作者：https://twitter.com/bitc2024

andrecronje

More from andrecronje

andrecronje

More from andrecronje

No activity yet

andrecronje

More from andrecronje

andrecronje

No activity yet

More from andrecronje

Alchemy University 学习教程，第一大块：Classes & Prototypes

Alchemy University 学习教程，第一大块：Classes & Prototypes

No activity yet

No activity yet

This Keyword

Prototype Chain

Classes

This Keyword

Prototype Chain

Classes