JS原型对象prototype

简介: JS原型对象prototype

让我简单的为大家介绍一下原型对象prototype吧!

使用原型实现方法共享

1.构造函数通过原型分配的函数是所有对象所 共享的。

2.JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象

3.这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存

4.我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法

5.构造函数和原型对象中的this 都指向 实例化的对象

function Person(name,age){
        this.name = name
        this.age = age
    }
    // 方法可以共享
    Person.prototype.sing = function(){
        console.log("唱歌")
    }
    let zs = new Person("张三",18)
    zs.sing() // 唱歌
    let ls = new Person("李四",19)
    ls.sing() // 唱歌
    console.log(zs.sing === ls.sing) // true

构造函数里面的 this 指向实例对象

let that 
    function Person(name, age) {
        that = this
        this.name = name
        this.age = age
    }
    // 构造函数里面的 this 就是实例对象 zs
    let zs = new Person("张三",18)
    console.log(that === zs) // true

原型对象里面的函数 this 指向的还是实例对象

let that 
    function Person(name) {
        this.name = name
    }
    Person.prototype.sing = function() {
        that = this
        console.log("唱歌")
    }
    let zs = new Person("张三")
    zs.sing()
    console.log(that === zs) // true

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
1天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
1天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
1天前
|
JavaScript 前端开发 开发者
深入理解JavaScript对象创建
深入理解JavaScript对象创建
|
2天前
|
JavaScript 前端开发
js用Date对象处理时间
以上就是JavaScript中Date对象处理时间的一些基本方法。
6 0
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
9 2
|
2天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
16 1
|
2天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
11 1
|
2天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
2天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)