js构造函数

时间: 2018-11-17阅读: 4939标签: 函数

使用构造函数构造可以复用的对象

js中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。
在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建,举个栗子,代码如下

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};


如果只是一个单独的对象,对象的属性和方法基本不会变了,这么玩完全可以,但是如果你的对象有很多实例,或者涉及继承或者构造函数传参,留意代码注释

//创建了一个构造函数
function Person(name,address){
    this.name = name;
    this.address = address;
}
//为构造函数的原型对象添加一个方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通过构造函数Person实例化一个p1,并传参
var p1 = new Person('postbird','earth');
//通过构造函数Person实例化一个p2,并传参
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 继承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

耐心品位上面的代码,这样的可扩展性就会更好,可以创N个实例,实现代码复用


经典案例

关于jsconstructor构造函数,有一个很经典的demo

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

注意这一行代码

Father.prototype.constructor = Father;//修正

为什么要修正?不是说constructor是原型对象上的一个属性,默认指向这个原型的构造函数?
我们把这一行打码注释掉

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

聪明如你,相信你已经发行了问题所在

Father.prototype = new Person('Beijin');

这一步的时候,原型指向了一个新对象,这个新对象的constructor指向的是Person。

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true 


前面我们说过new Person(‘Beijin’)对象是没有prototype的,prototype只有函数才有;
Father.prototype.constructor将会沿着new Person(‘Beijin’)的原型链向下查找constructor,
new Person(‘Beijin’)没有constructor就去它的__proto__找,
因为(new Person(‘Beijin’)).__proto__ === Person.prototype
而Person.prototype.constructor == function Person(),
所以 Father.prototype.constructor == Person.prototype.constructor //function Person()
当我们var one = new Father(25) 时 ,one.constructor = Father.prototype.constructor,
所以one.constructor指向function Person(),
所以,一定要进行修正,否则原型链会乱


原文来源:https://www.qdtalk.com/2018/11/07/JavaScript构造函数/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1360

深入理解 JavaScript 中的函数

本文旨在提供web开发人员必须了解的所有JavaScript函数的基本知识。函数于软件开发者而言并不是什么奇幻世界。如果你的日常活动涉及到编码,哪怕是一点点,那么在一天结束的时候,你一定创建/修改了一个或多个函数。

javascript函数记忆

记忆的定义基本上描述了实施该技术的有用方案。 当您拥有一个昂贵的函数时,如果给定相同的参数,该函数将始终导致相同的值,则缓存结果并在下次调用它时返回缓存的值非常有效。 这样,宝贵的时间不会浪费在重新计算值上

在vue项目中,如何定义全局变量/全局函数?

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数

Js异步生成器函数

异步生成器函数非常特殊,因为你可以在异步生成器函数中同时使用 await 和 yield。异步生成器函数与异步函数和生成器函数的不同之处在于,它们不返回 promise 或迭代器,而是返回一个异步迭代器

ES6中箭头函数

ES6 允许使用“箭头”(=>)定义函数。如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

JS箭头函数用处/示例

在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:更简短的函数;更直观的作用域和this的绑定(不绑定this)

js常用方法大全_前端常用Js函数封装

这是我在实际开发中常用的一些Js函数方法,今天总结了一下,以便以后查询,有需要的小伙伴可以参考下。包括:加载js || css || style、获取url参数、本地存储、cookie操作【set,get,del】、Js获取元素样式【支持内联】

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

vue生命周期简介和钩子函数

简单的来说一下vue的生命周期函数:beforeCreate el 和 data 并未初始化,created 完成了data数据的初始化,el没有,beforeMount 完成了虚拟el和data初始化

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!