JavaScript实例属性与构造器属性
在构造器上设置属性
首先在js中函数也是对象,所以在js中函数也可以挂载属性和方法
function Bar(){}
Bar.name="i m bar";
Bar.sayname=function(){
console.log(this.name)
}
Bar.sayname();//Bar;
var sum=Bar;
sum.sayname="no this function";
console.log(Bar.sayname);//"no this function"
Bar=null;
console.log(sum.sayname);//no this function
首先Bar.sayname()结果并不是”i m bar”而是一个”Bar” 而且你是无法改写这个name属性的 说明函数自身就带了一个name属性,保存的是他的名字.所以弹出的会是”Bar”下面我们声明了一个变量sum并且把Bar赋值给他.同时改写了一下sum的sayname属性.然后调用了Bar.sayname得出的结果是”no this function” 接着我们把Bar设置为null 然后再调用一下sum的.sayname方法发现还是存在的。
JavaScript高级程序设计里有段话说的挺好的 #110
由于函数名仅仅是指向函数的指针,因此函数名与包含对象指针的其他变量没有什么不同.换句话说函数可能会有多个名字.即时我们将Bar设置为null但是sum是他的另外一个名字.
构造器的属性去哪了?
Function.prototype.testname="i m test name";
function Bar(){}
Bar.sayTestName=function(){
console.log("%c "+this.testname,"color:red;")
}
Bar.sayTestName();//i m test name
Bar instanceof Function//true
okay,我们知道Function的是指向Function的原型的.那么我们把属性挂载到原型.那么函数就是Function的实例,实例中找不到的属性自然就会顺着原型链去原型上面找了.
在Object.prototype和Object添加会产生什么效果?
Object.testname="i m ObjectEntry name";
Object.prototype.testname="i m Object prototype name ";
function Bar(){}
Bar.sayTestName=function(){
console.log("%c "+this.testname,"color:red;")
}
Bar.sayTestName();//i m Object prototype name
首先我们知道所有的Function.prototype都来自于Object.prototype那么在Function.prototype找不到的自然就会去Object.prototype上面寻找了.Object是Object的实例所以并不会在这上面找.实例的方法与原型的方法是相隔的.具体解释看下面的
new 构造器是什么鬼?
Function.prototype.testname="i m test name";
Object.prototype.testname="i m bar object name";
function Bar(){
this.sayTrueName=function(){
console.log("%c "+this.testname,"color:green;")
}
}
Bar.sayTestName=function(){
console.log("%c "+this.testname,"color:red;")
}
Bar.sayTestName();//i m test name
var bar=new Bar()
console.log("can you find bar.sayname ?",bar.sayname);//undefined
bar.sayTrueName();//
okay.从上述代码我们可以看出了一些道理了
- new 一个函数 实际上是创建了Object的一个实例
- 声明一个函数实际上是创建了一个Function实例
写点继承来理解下实例与构造器
var XiaoMing=function(){
this.info="i m xiaoming today i choose death";
this.sayHello=function(){
console.log(this.info)
}
}
XiaoMing.prototype.goToDie=function(){
console.log(this.name+" go die")
}
var XiaoHong=function(){
this.name="xiaohong";
}
XiaoHong.prototype=new XiaoMing();
var xiaohong=new XiaoHong();
xiaohong.goToDie();//xiaohong go die;
xiaohong.sayHello();//i m xiaoming today i choose death;
通过设置XiaoHong的原型来构建成一条原型链,下面来大概解释下new XiaoHong=>XiaoHong.prototype=>new XiaoMing()=>XiaoMing.prototype=>Object.prototype=>null;首先我们实例化小明的时候.那么小明会有以下的属性
xiaoming:{
info:"i m xiaoming today i choose death";
sayHello:function(){
console.log(this.info)
}
_proto_:xiaoming.prototype
}
xiaoming.prototype:{
goToDie:function(){
....
}
}
那么实例化小红的时候也是同理.当调用xiaohong的goToDie()方法实际上是去顺着这个属性来寻找.
- A:xiaohong本身(this)有没有这个goToDie方法啊?
- B:不好意思,没有
- A:那麻烦你去xiaohong的原型链(prototype)上找找好不到
- B:okay let me find… oh. i find new XiaoMing..i must instantiate(实例化) XiaoMing
- B:我在实例化XiaoMing..让我在实例化的XiaoMing本身找找…恩..貌似没有.但是它有proto让我去它原型链上找找
- B:找到了!在实例化XiaoMing的原型链上 来给你
- A:thanks
(正在学习英语..让我写几句渣渣英语 大神勿喷..)
大概就是这么一个寻找过程..如果在中间任何一个环节找到了就不会继续往下寻找了.那么我们也可以通过设置原型链的模式来继承
var XiaoMing=function(){
this.info="i m xiaoming today i choose death";
this.sayHello=function(){
console.log(this.info)
}
}
XiaoMing.prototype.goToDie=function(){
console.log(this.name+" go die")
}
var XiaoHong=function(){
this.name="xiaohong";
}
XiaoHong.prototype=XiaoMing.prototype;
var xiaohong=new XiaoHong();
console.log(xiaohong)
xiaohong.goToDie();//xiaohong go die;
xiaohong.sayHello();//error;
~~ 通过设置XiaoHong.prototype来获得继承也是可以的. ~~
如果是new XiaoMing()这样会把XiaoMing本身的属性也就是this.xxx=xxx给继承下来.我们仅仅是需要原型链上的属性.所以我们可以用Object.create(XiaoMing.prototype)来继承.
同时实例之间的属性并不会相互影响 下面摘录JavaScript高级程序设计中的代码 #150
function Person(){
this.name="123";
this.sayName=function(){
console.log(this.name)
}
}
var person1=new Person();
var person2=new Person();
person2.name="456"
person1.sayName()//123
person2.sayName()//456
console.log(person1.sayName===person2.sayName)//false
但是通过构造函数实例化后.不同实例上的同名函数是不想等的.但是原型就不同了.下面把上面的例子改写一下
function Person(){
}
Person.prototype.name="123";
Person.prototype.sayName=function(){
console.log(this.name)
}
var person1=new Person();
var person2=new Person();
person2.name="456";
person1.sayName()//123
person2.sayName()//456
console.log(person1.sayName===person2.sayName)//true
当然原型上的属性是不会相等的.
所以我们会这样称呼上述的属性 代码转自here
(function(){
//私有静态成员
var user = "";
//私有静态方法
function privateStaticMethod(){
}
Box = function(value){
//私有成员
privateStaticUser = value;
//这个是私有方法
function privateMethod(){
}
//公有方法，因为能访问私有成员，也可以说是特权函数，也可以说是实例方法
this.getUser = function(){
return user;
};
//公有成员
this.user = 1;
};
//公有共享访问
Box.prototype.sharedMethod = function () {};
//公有共享属性
Box.prototype.sharedProperty = function () {};
//公有静态方法
Box.staticMethod = function(){};
//公有静态成员
Box.staticProperty = 1;
})();
那么问题来了
什么是公有共享 公有静态?
首先私有的很好理解 就是外面不能访问到的.那么公有共享就是原型链上面的方法和属性了 包括函数内部的this.xxx 因为在实例化后都能访问到 这些都是公有共享那么公有静态是什么？公有静态是直接挂载到函数上的还是用一段代码来演示 转自here
function Man(name, age) {
//定义实例属性
this.name = name;
this.age = age;
}
//定义静态属性。默认性别是男，不排除变性，^v^
Man.sex = '男';
//定义原型属性
Man.prototype.phone = '123456';
//除了name.sex和Man.prototype.phone其余全部是Undefined
alert(Man.sex + "-----" + Man.prototype.phone + "--" + Man.name + "--" + Man.age + "--" + Man.phone);
var man = new Man("Tom", 24);
alert(Man.sex + "--" + man.name + "--" + man.age + "--" + man.phone);
/**
* 通过例子说明：原型属性在实例化之后作为类的实例属性。
* 但是实例属性在实例化之后却不能作为原型属性。
*/
okay 上面有两个公有属性 this.name和this.age 一个公有共享的属性Man.prototype.phone 一个公有静态方法 Man.sex那么没有实例化之前 我们只能访问到prototype和Man.sex 其他的都需要实例化后才能获取到.实例化后.我们能够访问到Man.sex但是访问不到man(实例).sex 因为公有静态方法是不会通过原型继承的.而公有共享和公有方法是可以通过原型继承的.
今天就说这么多吧.有什么坑后续再填