这篇文章主要介绍“javascript中new方法怎么使用”,在日常操作中,相信很多人在javascript中new方法怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript中new方法怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在JavaScript中,new运算符用于创建一个自定义对象实例,或者是一个构造函数内置对象的实例;new创建出来的实例可以访问构造函数Person内的属性。
本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。
new 的用途
new:new 运算符用于创建一个自定义对象实例,或者是一个构造函数内置对象的实例。啥意思呢,有点拗口,我们先看个栗子先。
new F() 时,发生了什么
第一版
栗子在这:
function Person(name, age) {
this.name = name
this.age = age
console.log(this) // Person{name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}
从这个栗子中,我们可以看到,new 具有以下能力:
1、new 创建出来的实例可以访问构造函数Person内的属性;
2、new 创建出来的实例可以访问构造函数原型上的属性;
3、new 可以将构造函数中的this绑定到新创建出来的对象上;
那我们就先针对new的这三个能力先实现一下:
function fakeNew(Fn) {
// 创建一个空对象
let obj = new Object()
// 将新对象的原型指针指向构造函数的原型
obj.__proto__ = Fn.prototype
// 处理除了 Fn 以外的剩余参数
Fn.apply(obj, [].slice.call(arguments, 1))
return obj
}
看下效果
function Person(name, age) {
this.name = name
this.age = age
console.log(this) // Person {name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
function fakeNew(Fn) {
// 创建一个空对象
let obj = new Object()
// 将新对象的原型指针指向构造函数的原型
obj.__proto__ = Fn.prototype
// 处理除了 Fn 以外的剩余参数
Fn.apply(obj, [].slice.call(arguments, 1))
return obj
}
const newPerson = fakeNew(Person, "xuedinge", "20")
console.log(newPerson.name) // xuedinge
console.log(newPerson.have) // 20
console.log(newPerson) // Person {name: "xuedinge", age: "20"}
看样子跟new的能力比较相像了。但是当构造函数里有返回值时,是怎么样子的呢,再看个:
// 当返回值是对象时:
function Person(name, age) {
this.name = name
this.age = age
console.log(this) // Person {name: "xuedinge", age: "20"}
return {
car: "leikesasi"
}
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // undefined
console.log(person.have) // undefined
console.log(person.car) // leikesasi
console.log(person) // {car: "leikesasi"}
可以看出,当构造函数有返回值是对象时,new创建的实例对象就是构造函数返回的结果,当返回值是普通对象时呢,看下面这个:
// 当返回值是普通值时:
unction Person(name, age) {
this.name = name
this.age = age
console.log(this) // Person{name: "xuedinge", age: "20"}
return "leikesasi"
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}
当返回值是普通对象时,跟没有返回值时,结果是一致的。
到此,关于“javascript中new方法怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。