JavaScript中的对象

JavaScript 中的对象

JavaScript 中的对象 = 属性+方法, 函数也是一种对象

var animal = {
    name: "animal",
    eat: function () {
        console.log(this.name + " is eating");
    }
}
animal.eat();// animal is eating

// 动态的给对象增加一个属性
animal.color = "black";
console.log(animal.color);// black

console.log(animal.prototype);// undefined
console.log(animal.eat.prototype);// {}

JavaScript 中的继承

在javaScript中每个对象都有一个特殊的属性 __proto__，对象通过 __proto__ 建立了一个原型链。
就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（原型/父对象）里找，一直找到Object，Object的__proto__属性为null，再往上找就相当于在null上取值，会报错。
dog和cat中的name属性会覆盖animal的name属性，eat方法中的this为当前调用的对象，也就是dog.eat()时，eat中的this指向dog这个对象。

var dog = {
    name: "dog",
    __proto__: animal// 指向animal对象
}

var cat = {
    name: "cat",
    __proto__: animal// 指向animal对象
}

dog.eat();// dog is eating
cat.eat();// cat is eating

向Java靠拢

javascript 也可以像Java一样new 一个对象出来。

function Student(name) {// 这里大写首字母时为了更新Java中的类
    this.name = name;
    this.sayHello = function(){// 这中方式会导致：每个新建的对象都有各自的sayHello函数
        console.log("Hi, I'm " + this.name);
    }
}

andy = new Student("andy");
lisa = new Student("lisa");

console.log(andy == lisa);// false，说明对象都有各自的sayHello函数
andy.sayHello();// Hi, I'm andy
lisa.sayHello();// Hi, I'm lisa

换一种方式，把sayHello提出到一个公用的地方，我们可以创建一个原型对象，然后让andy, lisa这些从Student创建出来的对象的__proto__属性指向这个原型对象就OK啦。我们只需要把原型对象放到 Student.prototype 属性中，这样当我们每次创建andy,lisa 这些对象时，javascript就会自动的把原型链给建立起来。

function Student(name) {
    this.name = name;
}

Student.prototype = {
    sayHello: function () {
        console.log("Hi, I'm " + this.name);
    }
}

andy = new Student("andy");
lisa = new Student("lisa");

console.log(andy.sayHello == lisa.sayHello);// true
andy.sayHello();// Hi, I'm andy
lisa.sayHello();// Hi, I'm lisa

语法糖

ES6 中引入的语法糖

class Student {
    constructor(name) {
        this.name = name;
    }
    sayHello () {
        console.log("Hi, I'm " + this.name);
    }
}

andy = new Student("andy");
lisa = new Student("lisa");

andy.sayHello();// Hi, I'm andy
lisa.sayHello();// Hi, I'm lisa
console.log(andy.sayHello == lisa.sayHello);// true

从 码农翻身 公众号 摘录