javascript的对象


1: JavaScript的构造函数是什么?
1: 它是一个普通的函数
2: 它内部用了this关键字
3: 它有一个prototype属性,这个prototype是一个对象(当然,其实每一个函数都有prototype属性)
4: 这个prototype上面是可以被继承的属性

function Apple(price, colour){
    this.price = price;
    this.colour = colour;
}
Apple.prototype.type = 'fruit'; //可被继承的属性

var appleRed = new Apple(10, 'red');
var appleGreen = new Apple(20, 'green');

appleRed.colour;//red
appleGreen.colour;//green
appleRed.type; //fruit
appleGreen.type;//fruit

以上是一个从原型对象(Apple)生成实例对象(appleGreen, appleRed)的例子。接下来看看基于构造函数继承:
首先假设有两个构造函数:

function Fruit(){
    this.taste = 'sweet';
}

function Apple(color){
    this.color = 'red'
}

我们希望Apple能继承Fruit,怎么做?总共有5种继承方法:
1: 构造函数绑定
在子构造函数中,在父构造器身上调用call或者apply方法

function Fruit(){
    this.taste = 'sweet';
}

function Apple(color){
    Fruit.apply(this, arguments);
    this.color = 'red'
}

var appleRed = new Apple('red');
appleRed.taste;// 'sweet'

2: prototype赋值
实例化一个父对象,然后把它赋给子构造函数的prototype属性

function Fruit(){
    this.taste = 'sweet';
}

function Apple(color){
    this.color = 'red'
}

Apple.prototype = new Fruit();
Apple.prototype.constructor = Apple;//特别注意这一行

var appleRed = new Apple('red');
appleRed.taste;//'sweet'
appleRed.constructor === Apple;//true

每一个实例都有一个constructor,继承自构造函数的prototype的constructor属性。在执行了

Apple.prototype = new Fruit();

之后,相当于是把Apple的prototype这个对象整个覆盖了,这个时候 Apple.prototype.constructor是Fruit这个方法。这样子就意味这appleRed.constructor也是Fruit,这样继承就混乱了,因为appleRed明明是由Apple这个构造方法实例化出来的。所以我们要把Apple正确的constructor重新设置回去:

Apple.prototype.constructor = Apple;

3: 把父构造函数的prototype直接赋给子构造函数的prototype

function Fruit(){}
Fruit.prototype.taste = 'sweet';

function Apple(color){
    this.color = 'red'
}

Apple.prototype = Fruit.prototype;
Apple.prototype.constructor = Apple;

var appleRed = new Apple('red');
appleRed.taste;//'sweet'
Fruit.prototype.constructor === Apple;//true

虽然实现了继承,但是现在Apple和Fruit的prototype指向了同一段内存,任何对Apple.prototype的修改都会影响到Fruit.prototype,所以代码最后一行的这种结果,是我们不愿意看到的。
4: 利用一个空的中介构造函数
其实第四种是第二种和第三种的结合

function Fruit(){}
Fruit.prototype.taste = 'sweet';

function Apple(color){
    this.color = 'red'
}

var F = function(){};
F.prototype = Fruit.prototype;
Apple.prototype = new F();
Apple.prototype.constructor = Apple;

var appleRed = new Apple('red');
appleRed.taste;//'sweet'
appleRed.constructor === Apple;//true

1: 中介构造函数的prototype=父构造函数的prototype;
2: 子构造函数的prototype=中介构造函数的一个实例;
3: 把子构造函数的constructor复原为自己
5: copy继承
就是把父构造函数的prototype上的所有属性和方法拷贝进子构造方法。

function Fruit(){}
Fruit.prototype.taste = 'sweet';

function Apple(color){
    this.color = 'red'
}

function extend(child, parent){
    var c = child.prototype;
    var p = parent.prototype;
    for(var i in p){
        c[i] = p[i]
    }
}
extend(Apple, Fruit);//调用继承方法
var appleRed = new Apple('red');
appleRed.taste;//'sweet'


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>