js构造函数中 new 一个对象的解释 - 易塔云建站-模板下载,web开发资源,技术博客

js构造函数中 new 一个对象的解释发布于：2021-03-07 20:22:57 来源：李小菜查看：10 讨论：0

理解对象是一些拥有属性和方法的函数，这些对象对于描述逻辑事务非常重要。
我认为对象就是一个大括号（没有更大的括号了），无需过度抽象化。
工厂模式（是软件设计领域共知方法）：

/**工厂模式**/
function createPerson(name,age,job){
    var obj = new Object();
    obj.name = name;
    obj.job = job;
    obj.age = age;
    obj.sayHey = function(){
        alert(this.name)
    };
    return obj;
}
var person1 = createPerson("red",23,"hhh");
person1.sayHey();
//调用后会返回一个包含3个属性+一个方法的对象。

/*工厂模式中，不给出this，内部声明，并数据化，需带return返回*/
function makePlayer(name,totalScore,gamesPlayed){
    var obj = {};
    obj.name = name;
    obj.totalScore = totalScore;
    obj.gamesPlayed = gamesPlayed;
    return obj;
    //不加return 就是普通函数，普通函数没有返回语句
    //那下面的函数调用，就没结果
}
var person = makePlayer("red",90,"yes");
console.log(person.name);

后来演变为构造函数模式，也就是现在经常用的。

/*构造函数模式
*   带new操作符
*   首字母大写
*   函数内部不带return语句
*   PS：相对于普通函数，构造函数中的this是指向实例的，而普通函数调用中的this是指向window的。
*/
//Object Array，元素构造函数，在运行时会自动出现在执行环境中。
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayHey = function(){
        alert("你好，我是：" + this.name + "！")
    }
    // console.log(this);
}
// console.log(Person);
var person1 = new Person("red",23,"hhh");

如何理解 new 这个过程？

//new一个对象的过程拆解：
/*拆解过程分四步：
*   1，创建一个空对象obj
*   2-1，将这个空对象的 __proto__ 成员指向了构造函数对象的 prototype 成员对象
*   2-2，将构造函数的作用域赋给空对象，因此构造函数的this指向新对象obj，然后再调用构造函数。
*   3，执行你的数据操作，工厂模式或对象字面量方式赋值。
*   4，返回这个对象。
*/
//俗称工厂模式拆解
function anotherObj(){
    //创建空对象;
    var otherPerson = {};
    //将空对象的 __proto__ 指向构造函数的 prototype 成员对象
    otherPerson.__proto__ = Person.prototype;
    //延长实例的作用域至构造函数，此时的构造函数this指针，指向着这个实例。新对象也就有了这些属性和方法
    Person.call(otherPerson);
    //将otherPerson对象数据调用 Person构造函数属性和方法并赋值
    otherPerson.name = "red";//执行构造函数中的代码
    otherPerson.age = 23;//这一部分在根据Person构造器中的属性，添加对应实例
    otherPerson.job = "hhh";//如果你不写sayHey，也会默认添加
    //就像工厂模式一样，需要返回一个新对象
    return otherPerson;
}
anotherObj();
//结束
var person2 = anotherObj();
console.log(person1);
// console.log(person2);
// console.log(person1.constructor == Person);//true
// console.log(person2.constructor == Person);//依然是 true

以上是本笔记的精华，最后涉及到一个概念：实例的__proto__ 是何时或怎么又为何指向构造函数的 prototype ，后期继续为大家分享学习成果。

上一篇：学习 js 之 apply() 和 call() 方法下一篇：测试投票-开发中完全使用ES6的比例超过90

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友