js 面相对象(es5版)

isPrototypeOf() Object.getPrototypeOf()

function Person(name) {
    this.name = name;
}
Person.prototype.age = 28;
Person.prototype.job = "web";
Person.prototype.sayName = function () {
    alert(this.name);
}
var person1 = new Person('门路阳');
var person2 = new Person('刘备');
alert(Person.prototype.isPrototypeOf(person1));//true
alert(Person.prototype.isPrototypeOf(person2));//true

//--------------------------

console.log(Object.getPrototypeOf(person1));//返回原型对象
console.log(Object.getPrototypeOf(person2).age);//28
alert(person1.hasOwnProperty('name'));//true
alert(person1.hasOwnProperty('age'));//false

//--------------------------

alert('name' in person1);//true
alert('age' in person1);//true
alert('what' in person1);//false

Object.keys() 返回出一个可枚举属性的字符串数组

数组的顺序是按for-in循环中出现的顺序

//接上面的例子
console.log(Object.keys(Object.prototype));//[]
console.log(Object.keys(Person.prototype));//["age", "job", "sayName"]
console.log(Object.keys(person1));//["name"]

Object.getOwnPropertyNames() 返回所有实例属性,无论它是否可枚举

//接上面的例子
console.log(Object.getOwnPropertyNames(Object.prototype));//["__defineGetter__", "__defineSetter__", "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", "propertyIsEnumerable", "__proto__", "constructor", "toString", "toLocaleString", "valueOf", "isPrototypeOf"]
console.log(Object.getOwnPropertyNames(Person.prototype));//["constructor", "age", "job", "sayName"]
console.log(Object.getOwnPropertyNames(Person));//["length", "name", "arguments", "caller", "prototype"]
console.log(Object.getOwnPropertyNames(person1));//["name"]

原型+借用构造函数的组合继承

SubType.prototype 会多出name和colors属性

function SuperType(name) {
    this.name = name;
    this.colors = ['black','yellow'];
}
SuperType.prototype.alertColor = function () {
    alert(this.colors);
}
function SubType(name, age) {
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.constructor = SubType;
SubType.prototype.sayAge = function () {
    alert(this.age);
};
var person1 = new SubType('门路阳',28);
person1.colors.push('blue');
person1.alertColor();
console.log(Object.keys(SubType.prototype));

var person2 = new SubType('张飞',33);
person2.alertColor();

原型式继承

var person = {
    name:'门路阳',
    friends:['kobe','nash']
};
/*function createP(obj) {
    function Per() {

    }
    Per.prototype = obj;
    return new Per();
}
var per1 = createP(person);
per1.name = '张飞';
per1.friends.push('李逍遥');

var per2 = createP(person);
per2.friends.push('张三丰');
console.log(per2.friends);*/

//ECMAScript5新增方法Object.create()
var per1 = Object.create(person);
per1.name = '李逍遥';
per1.friends.push('张无忌');
var per2 = Object.create(person);
console.log(per2.name);
console.log(per2.friends);

//Object.create()加第二个参数和Object.defineProperties()类似,都可以控制属性操作
var per3 = Object.create(person,{
    name:{
        value:'李太包',
        writable:true//可写
    }
});
console.log(per3.name);
per3.name = '东方不败';
console.log(per3.name);

寄生组合式继承

引用类型最理想的继承方式,解决SubType.prototype 会多出name和colors属性的问题

function object(o) {
    //原型等于
    function F() {}
    F.prototype = o;
    /**
     * new F()打印的值为
     * F {}
     *   __proto__:Object
     *     sayName:function ()
     *     constructor:function SuperType(name)
     *     __proto__:Object
     */
    return new F();
}
function inheritPrototype(subType, superType) {
    console.log(superType.prototype);
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name) {
    this.name = name;
    this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function () {
    alert(this.name);
};
function SubType(name,age) {
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function () {
    alert(this.age);
}
var sub = new SubType('menluyang',28);
sub.sayName();
console.log(sub);
  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值