js筆記三十二之構(gòu)造函數(shù)模式擴展
构造函数模式扩展
function Fn(){ } Fn(); // -> 普通函数执行new Fn(); // -> 构造函数执行var f1 = new Fn(); // -> f1是构造函数的一个实例
在构造函数模式中new Fn()执行, 如果不需要传参, 后面的小括号可以省略: new Fn
var f1 = new Fn;
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,所以...
类有普通函数的一面, 当函数执行的时候, 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
在构造函数模式中, 浏览器会默认的把我们的实例返回(返回的是一个对象数据类型的值);如果我们自己手动写了return返回:
返回的是一个基本数据类型的值,当前实例是不变的,例如: return 100; f1还是当前Fn类的实例
返回的是一个引用数据类型的值, 当前的实例会被自己返回的值给替换掉, 例如: 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"}
检测某一个实例是否属于这个类 ->
instanceof
function Fn(){ this.num = 100; this.getNum = function(){ console.log(this.num) } }var f1 = new Fn;console.log(f1 instanceof Fn) // -> trueconsole.log(f1 instanceof Array) // -> falseconsole.log(f1 instanceof Object) // -> true // 因为所有的实例都是对象数据类型 而每一个对象数据类型都是Object这个内置类的一个实例, 所以f1也是他的一个实例
对于检测数据类型来说, typeof有自己的局限性,不能细分object下的对象,数组,正则...
var a = [];console.log(a instanceof Array) // -> true 说明a是一个数组
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) // -> falseconsole.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
isPrototypeOf
作者:uplyw
链接:https://www.jianshu.com/p/72f598ced12d
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章