学过 JS 的都知道 创建对象可以这样
- var obj=new Object();
- var obj=new Function();
用内置的函数对象来构造对象
还可以这样自定义函数
- function test(){}
- var baby=new test();
于是这时候有了一个疑问
console.log(typeof test);//function
返回的是一个 function 类型
console.log(typeof baby);//object
为什么这样捏?
那就是 new 在搞事情呗, baby 是 object 类型, 那不就是说, 它里面创建了一个对象并且返回了
让我们在 test 函数里面加点佐料继续验证
- function test(name){
- this.name=name;
- this.say=function(){
- return this.name+"吹牛逼说自己最帅"!
- }
- }
- var baby=new test("xjz");
- console.log(baby.name);//xjz
- console.log(baby.say());//xjz 吹牛逼说自己最帅!
- // 属性和方法都添加到自动创建的那个对象身上了
到现在为止 new 干了三件事
- var obj={};// 创建一个对象
- this.name=name;this.say=funcion(){return this.name+"吹牛逼说自己最帅!"};
在普通函数里面的 this 是 window 对象
所以得改变 this 指向来给 obj 添加属性和方法 test.call(obj); 吧 test 函数里面的 this 改变成 obj
所以你 this.name=name 不就是 obj.name=name; 这样明白了吧!!
3 把 obj 的地址赋值给等式左边的变量
接下来得需要原型链方面的知识了, 我后续后写原型链方面的知识.
1.function 出来的函数会自动添加一个 prototype 原型对象( 他上面的属性和方法只有一份并且所有实例共享)
2.object 对象都有内置的原型对象__proto__注意是两个_(我在这里吃过亏哈哈)
3. 并且 obj.__proto__指向它的构造函数的 prototype 对象
4.obj.__proto__就是一个 (地址) 根据它可以找到它构造函数的 prototype 对象
obj.__proto__=itsConstructor.prototype;//itsConstructor(它的构造函数的意思)
5. 这样当 obj 的里面没有你想要的属性和方法的时候, 它会顺着原型链一级一级向上查找, 直到找到你想要的方法时或者为 null 时才停止
6 这里介绍下吧 如果不了解原型链这个东西会一脸懵逼吧
假设 console.log(baby.run());
baby 里是没有 run 方法的
然后会根据 baby.__proto__找到 baby.prototype(依然没有)
因为 prototype 也是对象 (你们 typeof 一下就知道了) 所以也有__proto__属性
baby.prototype.__proto__----->找到了 Object.prototype(依然没有)
因为 prototype 是对象 当然是 Object 构造的了 Object.prototype 是所有对象的祖先
Object.prototype.__proto__==null 到此为止原型链终止
让我们给 prototype 对象添加一个方法, 如果能使用就说明 baby.__proro__=test.prototype;
- test.prototype.look=function(){
- return this.name+"正在看美女!";
- }
- console.log(baby.look());//xjz 正在看美女 成功访问到了
于是乎 new 很神奇的就干了这件事
obj.__proto__=test.prototype;
于是那句话 obj.__proto__指向它的构造函数的 prototype 对象这个概念就知道怎么来的了
实在 new 的过程实现的
所以综上所述
new 干了四件事
- var obj={};
- obj.__proto__=test.prototype;
- test.call(obj);
4 把 obj 的地址赋值给等式左边的变量
我认为 new 的意义在于节省代码, 相当于语法糖, 还有就是它可以拥使用构造函数里面的所有属性和方法
并且还可以扩展.
也不知道看了的人能不能明白... 你得看原型和原型链 要不不会很理解的
this 和作用域也可以看看
来源: http://www.bubuko.com/infodetail-2554195.html