饥人谷技术博客

js - 面向对象知识点

2016-02-27  本文已影响204人  冯走心
 function Person(name){
     this.name = name;
     this.showName = function(){
          alert(this.name);
     }
     // 隐式返回当前的this,所以return可以省略
     // return this;
 }
var p1 = new Person('小明');
var p2 = new Person('小强');
  function 构造函数(属性){
      this.属性=属性;
}
构造函数.原型.方法 = function(){
      console.log(this.属性);
};
var 对象1 =  new 构造函数();
 对象1.方法();
var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;
console.log(arr.hasOwnProperty('num')) //true
console.log(arr.hasOwnProperty('num2')) //false
console.log(arr.hasOwnProperty == Object.prototype.hasOwnProperty);//true 不是自身而是最外层的Object中的
function Person() {}
Person.prototype.constructor = Person; //这句会隐式自动生成
var p = new Person();
console.log(p.constructor);
p instanceof Object  // true
var arr = [];
console.log( Object.prototype.toString.call(arr) == '[object Array]' );  //'[object Array]'
//举例为什么说这种类型判断的方式是最佳的
window.onload = function(){
       var oF = document.createElement('iframe');
       document.body.appendChild( oF );
      var ifArray = window.frames[0].Array;
      var arr = new ifArray();
      console.log( arr.constructor == Array );  //false
      console.log( arr instanceof Array );  //false
      console.log( Object.prototype.toString.call(arr) == '[object Array]' );  //true
};
//封装方法
var classType = [];
'Boolean Number String Function Array Date RegExp Object Error'.split(' ').forEach(function(name) {
   classType['[object ' + name + ']'] = name.toLowerCase();
});
function getType(obj) {
   if (obj == null) {
       return String(obj);
   }
   return typeof obj === 'object' || typeof obj === 'function' ? classType[classType.toString.call(obj)] || 'object' : typeof obj;
}
//父类
function Person(name, sex) { 
        this.name = name;
        this.sex = sex;
}
Person.prototype.showName = function() {
        console.log(this.name);
};
//
var p1 = new Person('小明', '男');
    //p1.showName();
//
//子类
function Star(name, sex, job) { 
        Person.call(this, name, sex);//继承父类属性
        this.job = job;
}
//Star.prototype = Person.prototype; 通过这句可以做到继承,但是这是对象引用,一旦子类修改对象,会影响父类
//
extend(Star.prototype, Person.prototype); //采用拷贝继承则解决,影响父类的问题
//
Star.prototype.showJob = function() {};
var p2 = new Star('黄晓明', '男', '演员');
p2.showName();
//
function extend(obj1, obj2) {
        for (var attr in obj2) {
            obj1[attr] = obj2[attr];
        }
}
function Person() { //父类
            this.name = [1, 2, 3];
}
//
Person.prototype.showName = function() {
            alert(this.name);
};
//
function Star() { //子类
            Person.call(this); //属性继承
}
//关键的四句话
var F = function() {}; // 1. 创建一个新构造函数
F.prototype = Person.prototype; // 2. 新构造函数的原型指向要继承的父类构造函数
Star.prototype = new F(); // 3. 子类构造原型指向新构造函数的一个实例,可以使用父类的方法
Star.prototype.constructor = Star; // 4. 修正子类的指向,在上一步的时候它的原型指向了父类,所以需要修正回来
//
var p1 = new Star();
p1.showName();
alert(p1.name);
alert(p1.constructor);
p1.name.push(4);
var p2 = new Star();
alert(p2.name);
var Person = {
            des:'小丽',
            name: [1, 2, 3],
            showName: function() {
            alert(this.name);
    }
};
//
function clone(o) {//创建一个clone函数
            function F() {};
            F.prototype = o;
            return new F();
}
//
var p1 = clone(Person);
p1.des='小美';
p1.name.push(4);
p1.showName();
Person.showName();
console.log(p1.des);
console.log(Person.des);

参考

以上是对知识点的笔记,详细的js的面向对象可以百度或参考下面的文章
三生石上 - JavaScript继承详解系列

上一篇 下一篇

猜你喜欢

热点阅读