JS中Object.setPrototypeOf方法,js定义css变量,使用js定义的css变量

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");
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值