美文网首页
JS中Object.setPrototypeOf方法,js定义c

JS中Object.setPrototypeOf方法,js定义c

作者: 仰望天空的人 | 来源:发表于2023-07-17 20:11 被阅读0次

js定义css变量

    <style>
        html,body{
            width: 100%;height: 100%;overflow: hidden;
        }
        #beard {
            position: relative;
            width: 60px;
            height: 60px;
            margin: 200px auto 0 auto;
            border-radius: 50%;
            box-shadow: 50px 80px 0 0 currentColor, 100px 80px 0 0 currentColor;
            -webkit-box-reflect: left 80px;
        }
        #beard:after,#beard:before{
            content: '';
            position: absolute;
            top: 40px;
            width: 70px;
            height: 40px;
            border: 0 solid transparent;
            border-bottom: 60px solid currentColor;
        }
        #beard:after{
            left: 10px;
            border-radius: 0 0 0 100%;
            transform-origin: right 70px;
            transform: rotate(calc(-20deg - 30deg * var(--qw)));
        }
        #beard:before {
            left: 130px;
            border-radius: 0 0 100% 0;
            transform-origin: left 70px;
            transform: rotate(calc(20deg + 30deg * var(--qw)));
        }
    </style>
<script type="text/javascript">
    var root = document.documentElement;
    document.addEventListener("mousemove", function (e) {
        var x = e.clientX / innerWidth;
        var y = e.clientY / innerHeight;
        // 自定义css变量
        root.style.setProperty("--qw", y);
        document.getElementById("beard").style.color = "rgba(" + Math.floor(255 * x) + "," + 0 + "," + 140 + ",1)";
    })
</script>

Object.setPrototypeOf()

为现有对象设置原型,返回一个新对象
接收两个参数:第一个是现有对象,第二是原型对象。

new 命令通过构造函数新建对象实例的过程,其本质是将实例的原型,指向了构造函数的prototype属性,然后在实例上执行构造函数。

//构造函数
function Person(name) {
    this.name = name;
}

var p = new Person("aaa");
//等同于将构造函数的原型对象赋给实例对象p的属性__proto__
p.__proto__ = Object.setPrototypeOf({},Person.prototype);
Person.call(p,"bbb");

这样实例的属性proto就指向了构造函数的原型,这样就形成了原型链,当在实例中找不到属性或方法时,就通过原型链进行查找。
在实例中执行构造函数,构造函数就是一个普通函数,如果一个普通函数在一个对象中被执行了,那么this就是该实例。比如

var o = {};
function Person(name) {
    this.name = name;
}
//把构造函数放在对象o中执行,那么这个this就是o对象了,执行完后,该o对象就有了实例属性name了。
Person.call(o,"aaa");

相关文章

网友评论

      本文标题:JS中Object.setPrototypeOf方法,js定义c

      本文链接:https://www.haomeiwen.com/subject/zemgudtx.html