神刀安全网

js笔记三十二之构造函数模式扩展

构造函数模式扩展

function Fn(){   } Fn(); // -> 普通函数执行 new Fn(); // -> 构造函数执行 var f1 = new Fn(); // -> f1是构造函数的一个实例 
  1. 在构造函数模式中new Fn()执行, 如果不需要传参, 后面的小括号可以省略: new Fn
 var f1 = new Fn; 
  1. this的问题: 在类中出现的 this.xxx=xxx 中的this都是当前类的实例, 而某一个属性值(方法), 方法中的this需要看方法执行的时候, 前面是否有.才知道this是谁
function Fn(){     // this -> f1     this.num = 100;     this.getNum = function(){         // this -> 需要看getNum执行的时候才知道         console.log(this.num)     } } var f1 = new Fn; f1.getNum(); // 100 -> 此时的getNum函数的this是f1,f1.num = 100; var q = f1.getNum; q(); // undefined -> 此时的getNum函数的this是window,而window中并没num,所以... 
  1. 类有普通函数的一面, 当函数执行的时候, var x其实只是当前形成的私有作用域中的私有变量而已, 它和我们的f1这个实例没有任何的关系,只有 this.xxx=xxx才相当于给f1这个实例增加私有的属性和方法, 才和我们的f1有关系
function Fn(){     var x = 10;     this.num = 100;     this.getNum = function(){         console.log(this.num)     } } var f1 = new Fn; console.log(f1.x) // undefined 
  1. 在构造函数模式中, 浏览器会默认的把我们的实例返回(返回的是一个对象数据类型的值);如果我们自己手动写了return返回:
    1. 返回的是一个基本数据类型的值,当前实例是不变的,例如: return 100; f1还是当前Fn类的实例
    2. 返回的是一个引用数据类型的值, 当前的实例会被自己返回的值给替换掉, 例如: return {name:”lilei”} f1就不再是Fn的实例了,而是对象{name:”lilei”};
function Fn(){     this.num = 100;     this.getNum = function(){         console.log(this.num)     } } var f1 = new Fn; console.log(f1) // -> Fn {num: 100, getNum: ƒ}    
function Fn(){     this.num = 100;     this.getNum = function(){         console.log(this.num)     }     return 100; // 手动返回基本数据类型(值类型) } var f1 = new Fn; console.log(f1) // -> Fn {num: 100, getNum: ƒ}    
function Fn(){     this.num = 100;     this.getNum = function(){         console.log(this.num)     }     return {name:"lilei"}; // 手动返回引用数据类型(对象类型) } var f1 = new Fn; console.log(f1) // -> {name: "lilei"} 
  1. 检测某一个实例是否属于这个类 -> instanceof
function Fn(){     this.num = 100;     this.getNum = function(){         console.log(this.num)     } } var f1 = new Fn; console.log(f1 instanceof Fn) // -> true console.log(f1 instanceof Array) // -> false console.log(f1 instanceof Object) // -> true   // 因为所有的实例都是对象数据类型 而每一个对象数据类型都是Object这个内置类的一个实例, 所以f1也是他的一个实例 

对于检测数据类型来说, typeof有自己的局限性,不能细分object下的对象,数组,正则…

var a = []; console.log(a instanceof Array) // -> true 说明a是一个数组 
  1. f1和f2都是Fn这个类的一个实例, 都拥有num和getNum两个属性, 但是这两个属性是各自的私有属性, 所以:
function Fn(){     this.num = 100;     this.getNum = function(){         console.log(this.num)     } } var f1 = new Fn; var f2 = new Fn; console.log(f1 === f2) // -> false console.log(f1.getNum === f2.getNum) // false 

in: 检测某一个属性是否属于这个对象 (attr in Object) 不管是私有的属性还是公有的属性, 只要存在, 用in检测都是true

console.log("getNum" in f1) // -> true 

hasOwnProperty: 用来检测某一个属性是否为这个对象的”私有属性”, 这个方法只能检测私有的属性

console.log(f1.hasOwnProperty('getNum')) // -> true 

思考: 检测某一个属性是否为该对象的”公有属性” hasPubProperty

function hasPubProperty(obj,attr){     // 首先保证是它的一个属性并且还不是私有属性, 那么只能是公有的属性了     return (attr in obj) && !obj.hasOwnProperty(attr); } console.log(hasPubProperty(f1,"getNum")); // -> false 
  1. isPrototypeOf

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » js笔记三十二之构造函数模式扩展

分享到:更多 ()